《PHP編程：PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能》要點(diǎn)：
本文介紹了PHP編程：PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能，希望對(duì)您有用。如果有疑問(wèn)，可以聯(lián)系我們。

PHP應(yīng)用我們?cè)诤芏囗?xiàng)目中使用了搜索功能來(lái)贊助用戶(hù)更快更準(zhǔn)確的找到想要的信息.本文將介紹如何實(shí)現(xiàn)用戶(hù)輸入自動(dòng)提示的功能,就像谷歌百度搜索引擎一樣,當(dāng)用戶(hù)輸入關(guān)鍵字時(shí),輸入框下方會(huì)有提示,將與關(guān)鍵字相關(guān)的信息展現(xiàn)出來(lái)供用戶(hù)選擇,提升了用戶(hù)體驗(yàn).

PHP應(yīng)用本文將使用jquery ui的autocomplete插件,結(jié)合后端PHP,數(shù)據(jù)源通過(guò)PHP讀取mysql數(shù)據(jù)表的數(shù)據(jù).

PHP應(yīng)用

PHP應(yīng)用XHTML

PHP應(yīng)用首先將jquery庫(kù)和相關(guān)ui插件,以及css導(dǎo)入.

PHP應(yīng)用jQuery ui 插件可以在官網(wǎng)上下載：
接著在body中寫(xiě)一個(gè)輸入框：

PHP應(yīng)用jQuery

PHP應(yīng)用一看就明白,調(diào)用autocomplete插件,數(shù)據(jù)源來(lái)自search.php,當(dāng)用戶(hù)輸入1個(gè)字符的時(shí)候就調(diào)用數(shù)據(jù)源.autocomplte插件提供了幾個(gè)可配置的參數(shù)：
disabled：是否在頁(yè)面加載后不可用,默認(rèn)為false,這個(gè)沒(méi)必要設(shè)置成true,沒(méi)有多大意義.
appendTo：輸入時(shí)下拉的提示框追加元素,默認(rèn)為"body".
autoFocus：默認(rèn)為false,當(dāng)設(shè)置成true時(shí),下拉提示框第一個(gè)將會(huì)是被選中的狀態(tài).
delay：加載數(shù)據(jù)時(shí)的延遲時(shí)間,默認(rèn)為300,單位毫秒.
minLength：輸入多少個(gè)字符時(shí)就會(huì)出現(xiàn)下拉提示,默認(rèn)為1.
position：定義下拉提示框的位置.
source：定義數(shù)據(jù)源,數(shù)據(jù)源必須是json形式的,本例是通過(guò)哀求search.php獲取的數(shù)據(jù)源.
autocomplete還提供了許多事件和方法,詳情請(qǐng)查看其官網(wǎng)：

PHP應(yīng)用PHP

PHP應(yīng)用調(diào)用了autocomplete插件后,還并沒(méi)有提示效果,別著急,因?yàn)楸匾{(diào)用數(shù)據(jù)源.
首先我們必要一張表,并要往表中添加適量數(shù)據(jù),表的結(jié)構(gòu)如下：

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

PHP應(yīng)用?
請(qǐng)自行建表,并往表art中添加數(shù)據(jù).

PHP應(yīng)用search.php實(shí)現(xiàn)了連接Mysql數(shù)據(jù)庫(kù),并根據(jù)前端用戶(hù)的輸入,查詢(xún)并獲取數(shù)據(jù)表中相匹配的內(nèi)容,然后以JSON形式輸出.

PHP應(yīng)用
include_once("connect.php"); //連接數(shù)據(jù)庫(kù) 
 
$q = strtolower($_GET["term"]); //獲取用戶(hù)輸入的內(nèi)容 
$query=mysql_query("select * from art where title like '$q%' limit 0,10"); 
//查詢(xún)數(shù)據(jù)庫(kù),并將結(jié)果集組成數(shù)組 
while ($row=mysql_fetch_array($query)) { 
  $result[] = array( 
    'id' => $row['id'], 
    'label' => $row['title'] 
  ); 
} 
echo json_encode($result); //輸出JSON數(shù)據(jù) 

PHP應(yīng)用最后輸出的JSON數(shù)據(jù)格式為：

PHP應(yīng)用這時(shí),再測(cè)試下輸入,是不是看到你要的效果了呢?
最后,值得一提的是,autocomplete插件在firefox上有一個(gè)輸入BUG,輸入后并不能提示,需要向前空格再退格才有提示.網(wǎng)上有很多同學(xué)給出了解決方案,但是目前最新的autocomplete插件代碼貌視進(jìn)行了重構(gòu),我的解決辦法是,在133行中加入如下代碼：

PHP應(yīng)用
.bind("input.autocomplete",function(){ 
  //修復(fù)FF不支持中文bug 
  self.search(self.item); 
}); 

PHP應(yīng)用以上所述便是本文的全部?jī)?nèi)容了,希望大家能夠喜歡.

歡迎參與《PHP編程：PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能》討論，分享您的想法，維易PHP學(xué)院為您提供專(zhuān)業(yè)教程。

轉(zhuǎn)載請(qǐng)注明本頁(yè)網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/10962.html