autocomplete是jqueryui里的一个插件,作用类似于搜索时的自动提示功能。
使用autocomplete时除了要引用jQuery和jQueryUI之外,还要引入jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.position.js。
demo:
$('input[name=\'tag\']').autocomplete({
delay: 500,
source: function(request, response) {
$.ajax({
url: 'url',
data: { tag:request.term }, //request.term是input输入框中的值
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item.tag
}
}));
}
});
},
select: function(event, ui) {
$('input[name=\'tag\']').val(ui.item.label);
return false;
}
});
为了减少服务器的压力,我们设置缓存,不用每次都通过AJAX向服务器请求数据,代码如下: