我希望能够在搜索发生时在自动完成下拉列表中显示加载图标。我怎样才能做到这一点?
当前代码:
$("#searchbox").autocomplete({
search: function(event, ui) {
$('ul.ui-autocomplete').append("<li id='loading_icon'></li>");
$('ul.ui-autocomplete').show();
},
open: function(event, ui) {
$('#loading_icon').hide();
}
...
但是发生的情况是图标显示在浏览器页面的左上角。位置的计算尚未发生。我可以以某种方式调用来计算自动完成下拉框的位置吗?
谢谢!
最佳答案
这是可行的,但您必须将 source
选项转换为函数并自行发出 AJAX 请求。例如:
$("#selector").autocomplete({
source: function (request, response) {
/* Show the loading indicator while a search is in progress */
response([{ label: "Loading...", loading: true }]);
$.ajax({
url: "your_url_here",
data: request,
type: "GET",
dataType: "json"
}).success(response);
},
}).data("autocomplete")._renderItem = function (ul, item) {
var $li = $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
/* Make sure nothing happens when you click "Loading" */
if (item.loading) {
$li.find("a").on("click", false);
}
};
覆盖 _renderItem
的最后一位这样做是为了我们可以取消加载项的点击事件(并防止将其放置在 input
中)。
示例: http://jsfiddle.net/m3MGH/
更新,根据下面的评论:
要在 div
中显示加载图像,您可以执行以下操作(只需更改 _renderItem
函数):
.data("autocomplete")._renderItem = function(ul, item) {
var $li = $("<li></li>");
if (item.loading) {
$li.append("<div>Loading<img src='my_loading_img' /></div>").appendTo(ul);
} else {
$li.data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
}
return $li;
};
您可能需要使用一些 CSS 来使内容正确定位,但这应该可以帮助您入门。
关于jquery - 搜索时可以显示 jQuery 自动完成下拉列表吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11961499/