jQuery Autocomplete
文档
插件 jQuery.autocomplete 中文 API 文档
这个插件是由 Pixabat.com 开发的，并为它提供了免费的 Public Domain 图片的国际存储库。我们已在生产中实施了该软件，并本着“ Pixabay”的精神与他人自由共享。
jQuery-autoComplete
jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。
通过输入更多的字符，用户可以过滤列表以获得更好的匹配。
Features
- 轻量级：3.4 kB JavaScript- 压缩后小于 1.4 kB
- 完全灵活的数据源
- 智能缓存，延迟和最小字符设置
- Callbacks
用法
在页面的<head>部分中 包含样式表 jquery.auto-complete.css- 并在加载 jQuery 库后添加 JavaScript 文件 jquery.auto-complete.min.js。autoComplete 接受来自键 / 值对对象的设置，并且可以分配给任何文本输入字段。
$(selector).autoComplete({key1：value1，key2：value2});
实例演示
搜索本地数据
该插件的设计主要考虑了 AJAX 请求，但也可以与本地数据一起使用。可以在源函数中将自动完成建议程序连接到字符串数组，如下所示：
$('input[name="q"]').autoComplete({
minChars: 2,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ['ActionScript', 'AppleScript', 'Asp', ...];
var matches = [];
for (i=0; i<choices.length; i++)
if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
suggest(matches);
}
});
源函数遍历（本地）选择数组，然后返回一个包含所有（小写）匹配项的新数组。就那么简单。
AJAX 请求
AJAX 请求可能有非常不同的要求：JSON，JSONP，GET，POST，其他参数，身份验证等。为了在保持完整灵活性的同时保持源代码较小，我们决定仅使用简单的回调函数作为源建议。在此函数内进行 AJAX 调用，并通过响应回调返回匹配的建议：
$('input[name="q"]').autoComplete({
source: function(term, response){
$.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});
在此示例中，AJAX 调用需要返回字符串数组。即使未返回任何建议或发生错误，也必须始终调用回调响应。这样可以确保 autoComplete 实例的正确状态。
优化 AJAX 请求
默认情况下会缓存所有搜索结果，并阻止不必要的请求，以使服务器负载尽可能低。为了进一步减少对服务器的影响，可以在启动新的 AJAX 请求之前先中止未完成的 AJAX 请求：
var xhr;
$('input[name="q"]').autoComplete({
source: function(term, response){
try { xhr.abort(); } catch(e){}
xhr = $.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});
通过键入，用户可以在另一个请求之后触发一个 AJAX 请求。通过这一小技巧，我们可以确保仅执行最新的操作 - 如果尚未执行的话。
高级建议处理和自定义布局
通过使用 renderItem() 函数，可以将自动完成器变成项目建议器：
输入国家名称或语言代码时，将显示匹配建议的列表。例如，键入“ de”将显示“ Germany”作为建议，因为“ de”是德语的语言代码。此示例的源代码：
$('input[name="q"]').autoComplete({
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
var choices = [['Australia', 'au'], ['Austria', 'at'], ['Brasil', 'br'], ...];
var suggestions = [];
for (i=0;i<choices.length;i++)
if (~(choices[i][0]+' '+choices[i][1]).toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
},
renderItem: function (item, search){
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
return '<div class="autocomplete-suggestion" data-langname="'+item[0]+'" data-lang="'+item[1]+'" data-val="'+search+'"><img src="img/'+item[1]+'.png"> '+item[0].replace(re, "<b>$1</b>")+'</div>';
},
onSelect: function(e, term, item){
alert('Item "'+item.data('langname')+' ('+item.data('lang')+')" selected by '+(e.type == 'keydown' ? 'pressing enter' : 'mouse click')+'.');
}
});
在这种情况下，不需要自动填充文本字段，因此我们通过在 renderItem() 函数中设置 data-val =“’+ search +’”将其关闭。但是，选择一个项目时，onSelect() 回调将返回所有必需的信息。
又一个演示
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
