类似百度搜索文本框效果—自动补全+功能扩展

用过百度或者其他搜索站点的人，一定都看到过下面的效果。

百度.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
    });
  });

缺点：

1. 数据需要第一次就全部传来，但是如果我们初始化数据有2000条，我不可以一次性查出来，赋值给数据源数组；
2. 下面的场景就不能实现：我们需要用户选择公司现有的员工姓名，虽然文本框中显示的是用户名，但是我们需要同时将该员工的id赋值给文本框的一个属性（虽然用户看不到）；
3. 如果有同名的员工，用户在下拉选择时如何确定选哪一个呢？

• 解决上面提出的3个问题的解决办法
  1. 监听用户的操作，当用户每输入一个字符，重新请求接口，替换数据源数组；
  2. 控制，用户选择通过上下选择列表中的数据时，做额外的自定义操作，保存需要的数据；

3. 文本框下出现的自动补全列表中，自定义显示格式，比如姓名+手机号或者职位名称等等；

效果：

综合解决方案.gif

你看：
  1. 自动补全的是用户名+手机号；
  2. 选择后，用户id也赋值给了文本框的某个属性；
  3. 当然通过监听文本框的keydown事件，也实现了数据源的更新；

具体代码就不贴出来了，方案就是上面说的思路。实现需要依赖jquery-ui-autocomplete的这个扩展 。