用过百度或者其他搜索站点的人，一定都看到过下面的效果。
百度.gif
- 首先分析下这个是个什么样的需求：
1. 在文本框中输入一个字母，在文本框下方会出现一个提示文字列表，列出了几个包含该字母的关键词；
2. 再继续输入，提示的文字列表中的关键词更加精确；
- 可能你一眼看到上面的gif，就想到了jquery-ui的autocomplete功能。的确，我今天实现这个效果也是用这个插件，但是不仅仅是它的基础用法。
下面是这个插件的各种用法
- 环境准备
jquery.min.js
jquery-ui.min.js
jquery-ui.min.css
-
最简单的用法
最简单的.gif
说明：初始化数据，后期只是在第一次数据的范围内补全填充
code:
html:
<div class="ui-widget">
<label for="tags">标签：</label>
<input id="tags">
</div>
js:
$(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
});
});
缺点：
- 数据需要第一次就全部传来，但是如果我们初始化数据有2000条，我不可以一次性查出来，赋值给数据源数组；
- 下面的场景就不能实现：我们需要用户选择公司现有的员工姓名，虽然文本框中显示的是用户名，但是我们需要同时将该员工的id赋值给文本框的一个属性（虽然用户看不到）；
- 如果有同名的员工，用户在下拉选择时如何确定选哪一个呢？
- 解决上面提出的3个问题的解决办法
- 监听用户的操作，当用户每输入一个字符，重新请求接口，替换数据源数组；
- 控制，用户选择通过上下选择列表中的数据时，做额外的自定义操作，保存需要的数据；
- 文本框下出现的自动补全列表中，自定义显示格式，比如姓名+手机号或者职位名称等等；
效果：
综合解决方案.gif
你看：
1. 自动补全的是用户名+手机号；
2. 选择后，用户id也赋值给了文本框的某个属性；
3. 当然通过监听文本框的keydown事件，也实现了数据源的更新；
具体代码就不贴出来了，方案就是上面说的思路。实现需要依赖jquery-ui-autocomplete的这个扩展 。
