我正在使用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()
}
})
beforeSend回调将触发AJAX加载程序，而完整的回调将隐藏它。当然，仅当AJAX呼叫持续时间超过50毫秒时，此方法才有效。在这里加上setTimeout是因为jQuery Mobile AJAX加载器在与Web-kit浏览器一起使用时无法正常工作，这是一种触发解决方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句