《PHP編程：PHP結合jQuery.autocomplete插件實現輸入自動完成提示的功能》要點：
本文介紹了PHP編程：PHP結合jQuery.autocomplete插件實現輸入自動完成提示的功能，希望對您有用。如果有疑問，可以聯系我們。

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

PHP應用本文將使用jquery ui的autocomplete插件,結合后端PHP,數據源通過PHP讀取mysql數據表的數據.

PHP應用

PHP應用XHTML

PHP應用首先將jquery庫和相關ui插件,以及css導入.

PHP應用jQuery ui 插件可以在官網上下載：
接著在body中寫一個輸入框：

PHP應用jQuery

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

PHP應用PHP

PHP應用調用了autocomplete插件后,還并沒有提示效果,別著急,因為必要調用數據源.
首先我們必要一張表,并要往表中添加適量數據,表的結構如下：

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

PHP應用?
請自行建表,并往表art中添加數據.

PHP應用search.php實現了連接Mysql數據庫,并根據前端用戶的輸入,查詢并獲取數據表中相匹配的內容,然后以JSON形式輸出.

PHP應用
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數據 

PHP應用最后輸出的JSON數據格式為：

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

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

PHP應用以上所述便是本文的全部內容了,希望大家能夠喜歡.

歡迎參與《PHP編程：PHP結合jQuery.autocomplete插件實現輸入自動完成提示的功能》討論，分享您的想法，維易PHP學院為您提供專業教程。

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/10962.html