本文將使用jquery ui的autocomplete插件，結合後端PHP，資料來源透過PHP讀取mysql資料表的資料。
首先將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>
<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
呼叫了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教程有興趣的朋友有所幫助。
