本篇内容介绍了“怎么用jQuery+PHP+Mysql实现输入自动完成提示的功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
本文将使用jquery ui的autocomplete插件，结合后端PHP，数据源通过PHP读取mysql数据表的数据。
首先将jquery库和相关ui插件，以及css导入。
<link rel="stylesheet" href="jquery.ui.autocomplete.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
jQuery ui 插件可以在官网上下载：www.jqueryui.com
接着在body中写一个输入框：
<input type="text" id="key" name="key" />
$(function(){
$("#key").autocomplete({
source: "search.php",
minLength: 2
});
});
一看就明白，调用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插件后，还并没有提示效果，别着急，因为需要调用数据源。
首先我们需要一张表，并要往表中添加适量数据，表的结构如下：
CREATE TABLE `art` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;
请自行建表，并往表art中添加数据。
search.php实现了连接Mysql数据库，并根据前端用户的输入，查询并获取数据表中相匹配的内容，然后以JSON形式输出。
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数据
最后输出的JSON数据格式为：
[{"id":"3","title":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b
u62c9u9009u9879u83dcu5355"},
{"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370
u533au57df"}]
这时，再测试下输入，是不是看到你要的效果了呢？
最后，值得一提的是，autocomplete插件在firefox上有一个输入BUG，输入后并不能提示，需要向前空格再退格才有提示。网上有很多同学给出了解决方案，但是目前最新的autocomplete插件代码貌视进行了重构，我的解决方法是，在133行中加入如下代码：
.bind("input.autocomplete",function(){
//修复FF不支持中文bug
self.search(self.item);
});
“怎么用jQuery+PHP+Mysql实现输入自动完成提示的功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
