實際執行畫面

很久以前就有的一個基於 jQuery 框架的套件，簡單容易使用只可惜目前已經不再更新版本，所以未來的可用性比較少，如果只需要簡單的功能的話可以使用此套件，如需更多強大的功能就不建議使用了。


使用方法：
首先載入必要的檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='../jquery.autocomplete.js'></script>
//預載入使用者端的查詢資料
<script type='text/javascript' src='localdata.js'></script>
<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />


僅須把表單元件設定ID
<input type="text" id="suggest1" />
最後加上JavaScript 初步的功能就完成了
<script>
$(function(){
  $("#suggest1").focus().autocomplete(cities);
}); //cities 是 localdata.js 預先載入的資料,登記一下城市的名稱
</script>

附上可供修改個參數值

參數	預設	類型	說明
autoFill	布林	false	填入時預先自動選擇項目
cacheLength	整數	10	後端的查詢結果必須大於等於一
delay	整數	400	輸入時自動延遲以毫秒為單位
extraParams	物件	無	傳送到後端的額外參數 例:{bar:1}
formatItem	函式	無	每選擇一個選項觸發會傳入項次值
formatMatch	函式	無	限制數據
formatResult	函式	無	輸入字段格式,數據.位置.總數量
highlight	函式,布林	無	是否顯示出符合的選擇框
matchCase	布林	false	比較是否區分大小寫
matchContains	布林	false	是否比較緩存的數據
matchSubset	布林	true	優先使用緩存中數據.只作用於大於一小於十的的資料
max	整數	10	選擇框的數量限制
minChars	整數	1	最少輸入幾個字才啟動自動完成
multiple	布林	false	是否允許一個以上的字元啟動自動完成
multipleSeparator	字串	","	選項中間的分隔符號
mustMatch	布林	false	是否只與許後端資料
scroll	布林	true	是否顯示拉霸
scrollHeight	整數	180	選擇框的高度
selectFirst	布林	true	預先選擇第一筆
width	整數	輸入框寬度	自定義結果寬度

作者網站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
檔案大小：549 KB(包含範例和所有的程式碼)
檔案下載：http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip
檔案備份：下載