 jQuery Autocomplete
 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
 輕鬆擁有自動完成的文字輸入框
使用方式
下載 jQuery Autocomplete 後，將 js 和 css 引用進來。
<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 的範例：
<?php
$q = $_GET["q"];
if (!$q) return;
$data = array('台北市中正區','台北市大同區','台北市中山區','台北市松山區','台北市大安區');
foreach ($data as $value) {
if (strpos($value, $q) !== false) {
echo $value."\n";
}
}
?>
| 
發表於 2008-9-28 18:29
| 
