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

百度.gif

• 首先分析下這個是個什么樣的需求：

  1. 在文本框中輸入一個字母，在文本框下方會出現(xiàn)一個提示文字列表，列出了幾個包含該字母的關鍵詞；
  2. 再繼續(xù)輸入，提示的文字列表中的關鍵詞更加精確；

• 可能你一眼看到上面的gif，就想到了jquery-ui的autocomplete功能。的確，我今天實現(xiàn)這個效果也是用這個插件，但是不僅僅是它的基礎用法。

下面是這個插件的各種用法

• 環(huán)境準備

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

• 最簡單的用法

  
  
  最簡單的.gif

說明：初始化數(shù)據(jù)，后期只是在第一次數(shù)據(jù)的范圍內補全填充
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. 數(shù)據(jù)需要第一次就全部傳來，但是如果我們初始化數(shù)據(jù)有2000條，我不可以一次性查出來，賦值給數(shù)據(jù)源數(shù)組；
2. 下面的場景就不能實現(xiàn)：我們需要用戶選擇公司現(xiàn)有的員工姓名，雖然文本框中顯示的是用戶名，但是我們需要同時將該員工的id賦值給文本框的一個屬性（雖然用戶看不到）；
3. 如果有同名的員工，用戶在下拉選擇時如何確定選哪一個呢？

• 解決上面提出的3個問題的解決辦法
  1. 監(jiān)聽用戶的操作，當用戶每輸入一個字符，重新請求接口，替換數(shù)據(jù)源數(shù)組；
  2. 控制，用戶選擇通過上下選擇列表中的數(shù)據(jù)時，做額外的自定義操作，保存需要的數(shù)據(jù)；

3. 文本框下出現(xiàn)的自動補全列表中，自定義顯示格式，比如姓名+手機號或者職位名稱等等；

效果：

綜合解決方案.gif

你看：
  1. 自動補全的是用戶名+手機號；
  2. 選擇后，用戶id也賦值給了文本框的某個屬性；
  3. 當然通過監(jiān)聽文本框的keydown事件，也實現(xiàn)了數(shù)據(jù)源的更新；

具體代碼就不貼出來了，方案就是上面說的思路。實現(xiàn)需要依賴jquery-ui-autocomplete的這個擴展 。