之前常聽一些前輩在用JQuery,不過由於小弟功力不夠高深,所以還沒玩到那塊,但是後來才發現原來我天天接觸到…
相信各位也是,當我們在找資料問Google大神時,常常打一個字,底下就跑出來,這就是AutoComplete了….
這幾天在網上看到有人在教學,所以先學起來放,不過由於不熟JavaScript與JQuery,還是Try了一兩天才Try出來,AutoComplete有兩種用法,原理一樣只是取值的對象不同,一種是直接向網頁陣列取,一種則是向DB取,不多說先來個筆記記下:
基本配備:
1.當然是下載AutoComplete 套件
2.解壓縮到網頁目錄下(/var/www/html/jQuery)
以陣列取值:
1. 在
間加入:
其中main.css與thickbox.css是畫面外觀設定可以不加,但是jquery.autocomplete.css是下拉選單的式樣,可以自行設定.
2.在
加入:
請輸入:
3.最後在加上:
其中name array就是下拉選單會去比對的值.
以DataBase取值:
1.一樣引入JQuery:
在
間加入:
其中main.css與thickbox.css是畫面外觀設定可以不加,但是jquery.autocomplete.css是下拉選單的式樣,可以自行設定.
2. 在Body加入欄位:
請輸入:
3. 最後加上:
其中search.php代表去執行SQL的地方,撈出您要的資料做比對.
4.search寫法:
< ?
$searchText = $_GET[“q”];//接入搜尋字串
#echo $searchText;
if (!$searchText) return;//判斷是否有字串傳入
include_once(“../../../link.php”);//引入link
$mysql = “SELECT company FROM company WHERE company LIKE '$searchText%';”;//比對字串
#echo $mysql;
$query = mysql_query(“$mysql”);//執行mysql
$qcount = mysql_num_rows($query);//算總共有幾筆資料
if ($qcount > 0 ){//假設$qcount大於一執行
for ($i=1 ;$i< $qcount;$i++){ //跑幾次回圈
$qa = mysql_fetch_row($query); //撈出資料
foreach ($qa as $value){
echo $value.” “;//撈出資料
}
}
}
?>
有圖有真相:
參考資料:
4.官網Demo
091202備註:
最近發現這個有點不太符合我的需求,因為我希望User打的字可以跟挑選出來的字比對,然後以比較明顯的顏色顯示(原本只有粗體),找很久原本以為是修改”jquery.autocomplete.css”,結果發現不是應該要修改”jquery.autocomplete.js”約莫在429行,內容:
return value.replace(new RegExp(“(?![^&;]+;)(?!< [^<>]*)(” + term.replace(/([^$()[]{}*.+?|\])/gi, “\$1”) + “)(?![^<>]*>)(?![^&;]+;)”, “gi”), “$1“);
改為
return value.replace(new RegExp(“(?![^&;]+;)(?!< [^<>]*)(” + term.replace(/([^$()[]{}*.+?|\])/gi, “\$1”) + “)(?![^<>]*>)(?![^&;]+;)”, “gi”), “$1“);
附帶一提,jquery.autocomplete.css中有這幾行:
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
可以把Demo資料夾底下的indicator.gif拷貝到相對目錄就可以在比對時出現loading畫面.
