本節書摘來自異步社群《jquery、jquery ui及jquery mobile技巧與示例》一書中的第7章，第7.2節，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
在一些網站上，你可以找到用于選擇的下拉菜單，它們包含了極長的選項清單。在許多情況下，可以使用具有自動補全功能的輸入框取代下拉式菜單來幫助使用者。省去了滾動選擇，使用者隻要輸入目标選項的第一個字元，然後自動補全元件便可以完成剩下的事。
代碼清單7-2提供了一個自動補全的例子，它使用一段稱為“lorem ipsum”的文字來實作輸入第一個字後的補全。這段文字起源于兩千年前，但仍然使用在圖形設計和排版行業（通常被稱為“假文”或“填充”的文字），用來檢視設計的效果。
代碼清單7-2 提示lorem ipsum值
當運作這個例子時，要注意自動補全框中的提示是根據它們在第29～31行的出現順序排序的。autocomplete()函數在第34行被調用，它使用了source的選項，其值loremipsum為第28行建立的數組。如果需要一個不同的排列順序，按字母順序或按熱門程度，需要在“喂”給自動補全框資料前，自己先排好序。
7.2.1 為自動補全元素添加樣式
在調用autocomplete指令後，輸入框的html會變為這樣：
可以使用這些html代碼片段中的類名去手動修改自動補全元件的樣式。
7.2.2 設定自動補全的選項
表7-3列出的選項可以設定自動補全微件。
7.2.3 捕獲自動補全的事件
當使用自動補全時，有很多階段可以發生事件處理。下面的代碼片段舉例示範了哪個階段可以綁定它。
一個新的自動補全元件被初始化時：
使用者輸入的搜尋值達到minlength設定的長度時。傳回false将取消搜尋：
選項菜單打開時：
下拉菜單中的一個元素獲得焦點時。傳回false将阻止輸入框的更新：
一個選項被選擇時：
自動補全關閉時：
當使用者移動到螢幕上的下一個元素，如果輸入框的值也發生了變化，該事件被觸發：
7.2.4 調用自動補全的方法
下面的代碼片段示範了使用自動補全的方法的例子。
綁定click事件，設定選項minlength:0，點選輸入框後，不輸入任何值而使用目前值則會顯示所有搜尋的結果1：
關閉目前提示清單：
<code>$('#my-autocomplete').autocomplete('close');</code>