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

jquery.min.js
jquery-ui.min.js
jquery-ui.min.css

最简单的用法

最简单的.gif

说明：初始化数据，后期只是在第一次数据的范围内补全填充
code: 
html:

标签：


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