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";
}
}
?>
|