PHP結合jQuery.autocomplete外掛程式實現輸入自動完成提示的功能

我們在很多項目中使用了搜尋功能來協助使用者更快更準確的找到想要的資訊。本文將介紹如何?使用者輸入自動提示的功能，就像Google百度搜尋引擎一樣，當使用者輸入關鍵字時，輸入框下方會有提示，將與關鍵字相關的資訊展現出來供使用者選擇，提升了使用者體驗。

本文將使用jquery ui的autocomplete外掛程式，結合後端PHP，資料來源通過PHP讀取mysql資料表的資料。

XHTML

首先將jquery庫和相關ui外掛程式，以及css匯入。

 

代碼如下:
<link rel="stylesheet" href="jquery.ui.autocomplete.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>

 

jQuery ui 外掛程式可以在官網上下載：
接著在body中寫一個輸入框：

 

代碼如下:
<input type="text" id="key" name="key" />

 

jQuery

 

 代碼如下:
$(function(){
$("#key").autocomplete({
source: "search.php",
minLength: 2
});
});

 

一看就明白，調用autocomplete外掛程式，資料來源來自search.php，當使用者輸入1個字元的時候就調用資料來源。autocomplte外掛程式提供了幾個可配置的參數：
disabled：是否在頁面載入後不可用，預設為false，這個沒必要設定成true，沒有多大意義。
appendTo：輸入時下拉的提示框追加元素，預設為"body"。
autoFocus：預設為false，當設定成true時，下拉提示框第一個將會是被選中的狀態。
delay：載入資料時的延遲時間，預設為300，單位毫秒。
minLength：輸入多少個字元時就會出現下拉提示，預設為1。
position：定義下拉提示框的位置。
source：定義資料來源，資料來源必須是json形式的，本例是通過請求search.php擷取的資料來源。
autocomplete還提供了許多事件和方法，詳情請查看其官網：

PHP

調用了autocomplete外掛程式後，還並沒有提示效果，別著急，因為需要調用資料來源。
首先我們需要一張表，並要往表中添加適量資料，表的結構如下：

?

1 2 3 4 5

CREATE TABLE `art` ( `id` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;

請自行建表，並往表art中添加資料。

search.php實現了串連Mysql資料庫，並根據前端使用者的輸入，查詢並擷取資料表中相匹配的內容，然後以JSON形式輸出。

?

1 2 3 4 5 6 7 8 9 10 11 12

include_once("connect.php"); //串連資料庫   $q = strtolower($_GET["term"]); //擷取使用者輸入的內容 $query=mysql_query("select * from art where title like '$q%' limit 0,10"); //查詢資料庫，並將結果集組成數組 while ($row=mysql_fetch_array($query)) { $result[] = array( 'id' => $row['id'], 'label' => $row['title'] ); } echo json_encode($result); //輸出JSON資料

最後輸出的JSON資料格式為：

 

代碼如下:
[{"id":"3","title":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b
u62c9u9009u9879u83dcu5355"},
{"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370
u533au57df"}]

 

這時，再測試下輸入，是不是看到你要的效果了呢？
最後，值得一提的是，autocomplete外掛程式在firefox上有一個輸入BUG，輸入後並不能提示，需要向前空格再退格才有提示。網上有很多同學給出瞭解決方案，但是目前最新的autocomplete外掛程式代碼貌視進行了重構，我的解決方案是，在133行中加入如下代碼：

?

1 2 3 4

.bind("input.autocomplete",function(){ //修複FF不支援中文bug self.search(self.item); });

以上所述就是本文的全部內容了，希望大家能夠喜歡。