PHP编程：PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

《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.vephp.com/jiaocheng/10962.html