Question

我正在使用jquery mobile auto complete，请参阅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();
            });
        }
    });
});

Answer 1

工作示例：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()
    }
})

beforeSend 回调将触发AJAX加载程序，完成回调将隐藏它。当然，只有当AJAX调用持续时间超过50毫秒时，这才有效。加上 setTimeout 就在这里因为jQuery Mobile AJAX加载器在与web-kit浏览器一起使用时无法正常工作，这是一个触发的解决方法。

jquery mobile autocomplete，用于在搜索时显示消息

1 个答案: