添加加载搜索微调器

Question

我正在使用Ajax搜索城市和位置。

查询持续 5 秒。

如何添加指示搜索等待时间的微调器

这是代码的一部分

$('#firstadress').autocomplete({
serviceUrl: '/autosearch',
onSearchStart: function (suggestion) {
$(this).addClass('searching');
/* here where I want to added code */
},
onSearchComplete: function (suggestion) {
$(this).removeClass('searching');
},

我怎样才能改善这个问题。

提前致谢

Answer 1

您需要在搜索功能中添加加载器，并在自动完成中已经存在的响应函数中删除它。

<style type="text/css">
.loader
{
background: url(loader.gif); // you loader url
background-repeat: no-repeat;
background-position: right;
}
</style>
<script type="text/javascript">
$(function () {
$("#txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: 'url',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
}
});
},
search: function (e, u) {
$(this).addClass('loader');
},
response: function (e, u) {
$(this).removeClass('loader');
}
});
});
</script>
Enter search term: <input type="text" id="txtSearch" />