jQuery+PHP+Mysql實作輸入自動完成提示的功能

本文將使用jquery ui的autocomplete插件，結合後端PHP，資料來源透過PHP讀取mysql資料表的資料。

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

本文將使用jquery ui的autocomplete插件，結合後端PHP，資料來源透過PHP讀取mysql資料表的資料。

XHTML

首先將jquery函式庫和相關ui插件，以及css導入。

<code>  <span><link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"jquery.ui.autocomplete.css"</span><span>/></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"js/jquery.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.core.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.widget.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.position.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.autocomplete.js"</span><span>></span><span></script></span>  </code>

jQuery ui 外掛程式可在官網上下載：www.jqueryui.com

接著在body中寫一個輸入框：

<code>  <span><input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <span>/></span>  </code>

jQuery

<code> 
$(<span>function</span>()<span>{</span> 
    $(<span>"#key"</span>).autocomplete(<span>{</span> 
        source: <span>"search.php"</span>, 
        minLength: <span>2</span> 
    <span>}</span>);  <span>}</span>);  </code>

一看就明白，呼叫autocomplete插件，資料來源來自search.php，當使用者輸入1個字元的時候就呼叫資料來源。 autocomplte插件提供了幾個可設定的參數：

disabled：是否在頁面載入後不可用，預設為false，這個沒必要設定成true，沒有太大意義。

appendTo：輸入時下拉的提示框追加元素，預設為"body"。

autoFocus：預設為false，當設定成true時，下拉提示框第一個將會是被選取的狀態。

delay：載入資料時的延遲時間，預設為300，單位毫秒。

minLength：輸入多少個字元時就會出現下拉提示，預設為1。

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

source：定義資料來源，資料來源必須是json形式的，本例是透過請求search.php取得的資料來源。

autocomplete也提供了許多事件和方法，詳情請查看其官網：http://jqueryui.com/demos/autocomplete

PHP

呼叫了autocomplete插件後，還沒有提示效果，別急，因為需要呼叫資料來源。

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

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

請自行建表，並往表art中新增資料。

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

<code>  <span>include_once</span>(<span>"connect.php"</span>); <span>//连接数据库</span> 
  <span>$</span><span>q</span> = strtolower(<span>$_GET</span>[<span>"term"</span>]); <span>//获取用户输入的内容</span>  <span>$</span><span>query</span>=mysql_query(<span>"select * from art where title like '$q%' limit 0,10"</span>);  <span>//查询数据库，并将结果集组成数组</span>  <span>while</span> (<span>$</span><span>row</span>=mysql_fetch_array(<span>$</span><span>query</span>)) { 
    <span>$</span><span>result</span>[] = <span>array</span>( 
        <span>'id'</span> => <span>$</span><span>row</span>[<span>'id'</span>], 
        <span>'label'</span> => <span>$</span><span>row</span>[<span>'title'</span>] 
    ); 
}  <span>echo</span> json_encode(<span>$</span><span>result</span>);  <span>//输出JSON数据</span>  </code>

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

<code> 
[<span>{</span><span>"id"</span>:<span>"3"</span>,<span>"title"</span>:"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 
\u62c9\u9009\u9879\u83dc\u5355"<span>}</span>,  <span>{</span><span>"id"</span>:<span>"4"</span>,<span>"title"</span>:"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 
\u533a\u57df"<span>}</span>]  </code>

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

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

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

以上就介紹了jQuery+PHP+Mysql實現輸入自動完成提示的功能，包括了方面的內容，希望對PHP教程有興趣的朋友有所幫助。