jQuery Autocomplete:提升用户体验的智能搜索
$(function() {
$("#search-input").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://api.example.com/search",
data: {
term: request.term
},
success: function(data) {
response(data);
}
});
},
minLength: 2, // 最小字符长度
select: function(event, ui) {
// 当选择某个提示项时执行的回调函数
logSearch(ui.item ? ui.item.value : "");
},
open: function() {
// 打开提示菜单时执行的回调函数
$(this).autocomplete("widget").append("<div class='ui-autocomplete-loading'>Loading...</div>");
},
close: function(event, ui) {
// 关闭提示菜单时执行的回调函数
}
}).data( "ui-autocomplete" )._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
function logSearch(term) {
// 记录搜索日志的函数
$.post("https://api.example.com/log", {term: term});
}
});
这段代码使用jQuery UI Autocomplete插件提供了一个智能搜索框,它会向一个外部API发送请求来获取搜索建议,并在用户选择某个提示项时记录搜索日志。代码中包含了提示菜单打开和关闭时的回调函数,以及自定义提示项的渲染方式,从而提升了用户体验。
评论已关闭