我們在很(hěn)多(duō)項目中使用了搜索功能來(lái)幫助用戶更快更準确的找到想要的信息。本文将介紹如何實現用戶輸入自動提示的功能，就像谷歌(gē)百度搜索引擎一樣，當用戶輸入關鍵字時(shí)，輸入框下方會(huì)有(yǒu)提示，将與關鍵字相關的信息展現出來(lái)供用戶選擇，提升了用戶體(tǐ)驗。

本文将使用jquery ui的autocomplete插件，結合後端PHP，數(shù)據源通(tōng)過PHP讀取mysql數(shù)據表的數(shù)據。

XHTML

首先将jquery庫和(hé)相關ui插件，以及css導入。

jQuery ui 插件可(kě)以在官網上(shàng)下載：www.jqueryui.com

接着在body中寫一個(gè)輸入框：

jQuery

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

一看就明(míng)白，調用autocomplete插件，數(shù)據源來(lái)自search.php，當用戶輸入1個(gè)字符的時(shí)候就調用數(shù)據源。autocomplte插件提供了幾個(gè)可(kě)配置的參數(shù)：

disabled：是否在頁面加載後不可(kě)用，默認為(wèi)false，這個(gè)沒必要設置成true，沒有(yǒu)多(duō)大(dà)意義。

appendTo：輸入時(shí)下拉的提示框追加元素，默認為(wèi)"body"。

autoFocus：默認為(wèi)false，當設置成true時(shí)，下拉提示框第一個(gè)将會(huì)是被選中的狀态。

delay：加載數(shù)據時(shí)的延遲時(shí)間(jiān)，默認為(wèi)300，單位毫秒(miǎo)。

minLength：輸入多(duō)少(shǎo)個(gè)字符時(shí)就會(huì)出現下拉提示，默認為(wèi)1。

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

source：定義數(shù)據源，數(shù)據源必須是json形式的，本例是通(tōng)過請(qǐng)求search.php獲取的數(shù)據源。

PHP

調用了autocomplete插件後，還(hái)并沒有(yǒu)提示效果，别着急，因為(wèi)需要調用數(shù)據源。

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

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

請(qǐng)自行(xíng)建表，并往表art中添加數(shù)據。

search.php實現了連接Mysql數(shù)據庫，并根據前端用戶的輸入，查詢并獲取數(shù)據表中相匹配的內(nèi)容，然後以JSON形式輸出。

include_once("connect.php"); //連接數(shù)據庫

$q = strtolower($_GET["term"]); //獲取用戶輸入的內(nèi)容
$query=mysql_query("select * from art where title like '$q%' limit 0,10");
//查詢數(shù)據庫，并将結果集組成數(shù)組
while ($row=mysql_fetch_array($query)) {
	$result[] = array(
		'id' => $row['id'],
		'label' => $row['title']
	);
}
echo json_encode($result);  //輸出JSON數(shù)據

最後輸出的JSON數(shù)據格式為(wèi)：

[{"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"}]

這時(shí)，再測試下輸入，是不是看到你(nǐ)要的效果了呢？

最後，值得(de)一提的是，autocomplete插件在firefox上(shàng)有(yǒu)一個(gè)輸入BUG，輸入後并不能提示，需要向前空(kōng)格再退格才有(yǒu)提示。網上(shàng)有(yǒu)很(hěn)多(duō)同學給出了解決方案，但(dàn)是目前最新的autocomplete插件代碼貌視(shì)進行(xíng)了重構，我的解決方法是，在133行(xíng)中加入如下代碼：

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

好，到此本例講解已經完成，helloweba.com将繼續為(wèi)各位在路上(shàng)的同學提供優質、實用的前後端應用方面的文章，敬請(qǐng)關注。