Jquery移动自动完成，在搜索时显示消息

jquery mobile autocomplete , to show message while searching

本文关键字：搜索 显示 消息 移动 Jquery      更新时间：2023-09-26

我正在使用jquery移动自动完成，请参见http://jsfiddle.net/Q8dBH/11/演示。

所以每当用户按下任何字母，我需要显示一些消息，如"请等待。"

所以我添加了如下代码:但是它只显示第一次或第二次或不显示所有的时间..如何显示消息每当用户输入的东西，直到服务器响应数据。

$ul.html('<center><a href="#">Searching Please Wait</a><br><img src="http://freegifts.in/diet/themes/images/ajax-loader.gif"></center>');

我的完整js如下。

$(document).on("pagecreate", ".ui-responsive-panel", function () {
    $(document).on("click", "li", function () {
        var text = $(this).text();
        $(this).closest("ul").prev("form").find("input").val(text);    });
    $("#autocomplete").on("filterablebeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length >0) {
            $ul.html('<center><a href="#">Searching Please Wait</a><br><img src="http://freegifts.in/diet/themes/images/ajax-loader.gif"></center>');
            //$ul.listview("refresh");
                            $('.ui-responsive-panel').enhanceWithin();
            $.ajax({
                url: "http://freegifts.in/diet/calorie.php",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
                }
            })
                .then(function (response) {
                $.each(response, function (i, val) {
                    html += "<li data-role='collapsible' data-iconpos='right' data-shadow='false' data-corners='false'><h2>Birds</h2>" + val + "</li>";
                });
                $ul.html(html);
                //$ul.listview("refresh");
                //$ul.trigger("updatelayout");
                $('.ui-responsive-panel').enhanceWithin();
            });
        }
    });
});

示例:http://jsfiddle.net/Gajotres/Q8dBH/12/

现在这是一个复杂的问题。如果您想显示jQuery Mobile AJAX加载器，有一个先决条件，AJAX调用必须超过50毫秒(jQuery Mobile动态内容增强过程时间不考虑在内)。它工作在jsFiddle的例子，但它可能不工作在一些更快的环境。

您可以使用以下代码:

$.ajax({
    url: "http://freegifts.in/diet/calorie.php",
    dataType: "jsonp",
    crossDomain: true,
    beforeSend: function() {
        // This callback function will trigger before data is sent
        setTimeout(function(){
            $.mobile.loading('show'); // This will show ajax spinner
        }, 1);
    },
    complete: function() {
        // This callback function will trigger on data sent/received complete
        setTimeout(function(){
            $.mobile.loading('hide'); // This will hide ajax spinner
        }, 1);          
        $.mobile.loading('hide'); // This will hide ajax spinner
    },              
    data: {
        q: $input.val()
    }
})

beforeend 回调将触发AJAX加载器，complete回调将隐藏它。当然，这只会在AJAX调用持续超过50ms的情况下起作用。另外setTimeout在这里是因为jQuery移动AJAX加载器在与web-kit浏览器一起使用时不能正常工作，这是一个触发解决方案。

相关文章：