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

本文將使用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時，下拉提示框第一個將會是被選中的狀態(tài)。

delay：加載數據時的延遲時間，默認為300，單位毫秒。

minLength：輸入多少個字符時就會出現下拉提示，默認為1。

position：定義下拉提示框的位置。

source：定義數據源，數據源必須是json形式的，本例是通過請求search.php獲取的數據源。

autocomplete還提供了許多事件和方法，詳情請查看其官網：

PHP

調用了autocomplete插件后，還并沒有提示效果，別著急，因為需要調用數據源。

首先我們需要一張表，并要往表中添加適量數據，表的結構如下：

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形式輸出。

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":"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b

\u62c9\u9009\u9879\u83dc\u5355"},

{"id":"4","title":"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370

\u533a\u57df"}]

這時，再測試下輸入，是不是看到你要的效果了呢？

最后，值得一提的是，autocomplete插件在firefox上有一個輸入BUG，輸入后并不能提示，需要向前空格再退格才有提示。網上有很多同學給出了解決方案，但是目前最新的autocomplete插件代碼貌視進行了重構，我的解決方法是，在133行中加入如下代碼：

.bind("input.autocomplete",function(){

//修復FF不支持中文bug

self.search(self.item);

});

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

更多信息請查看IT技術專欄