本文将使用jquery ui的autocomplete插件，结合后端PHP，数据源通过PHP读取mysql数据表的数据。
首先将jquery库和相关ui插件，以及css导入。
<code> <span><link> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"jquery.ui.autocomplete.css"</span><span>/></span> <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"js/jquery.js"</span><span>></span><span></span> <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.core.js"</span><span>></span><span></span> <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.widget.js"</span><span>></span><span></span> <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.position.js"</span><span>></span><span></span> <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.autocomplete.js"</span><span>></span><span></span> </span></code>
jQuery ui 插件可以在官网上下载：www.jqueryui.com
接着在body中写一个输入框：
<code> <span><input> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <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教程有兴趣的朋友有所帮助。
