使用方式

下載 jQuery Autocomplete 後，將 js 和 css 引用進來。
view plaincopy to clipboardprint?
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />    
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>  
<script type="text/javascript" src="jquery.autocomplete.js"></script>  

使用靜態資料的範例

這個 plugin 有兩種使用(取得)資料的方式，一種是直接使用 javascript array 的資料來做 autocomplete，另一種是使用 AJAX 去 server 端要資料。先看第一種方式的作法：
<input type="text" name="t1" id="t1" />  
這是一個普通的文字輸入框，假設這是要給 user 輸入行政區的欄位，現有的資料已存在於 javascript 的程式中，可以再加入以下程式來達到 autocomplete 的功能：
  var data = ['台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區'];  
  $("#t1").autocomplete(data, {matchContains: true});  
很簡單吧！試試看效果：

請輸入台灣的行政區：
台北
 


使用 AJAX 取得資料的範例

另一種方式是資料存放於 server 端，由 client 端即時向 server 端取得，適合資料量比較大的時候的處理方式。程式也相當簡單，原本指定的資料來源改為 server 端的一隻程式即可：
$("#t2").autocomplete('autocomplete.php');  
client 端會將 user 輸入的值以 q 這個變數傳入，server 端只需要把資料以斷行隔開輸出即可，以下是一段 PHP 的範例：
view plaincopy to clipboardprint?
<?php  
$q = $_GET["q"];  
if (!$q) return;  
$data = array('台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區');  
foreach ($data as $value) {  
  if (strpos($value, $q) !== false) {  
    echo $value."\n";  
  }  
}  
?>