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

XHTML

首先将jquery库和相关ui插件，以及css导入。一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异
(最后注意ajax请求的返回值的格式)

 

jQuery ui 插件可以在官网上下载：
接着在body中写一个输入框：

 

复制代码代码如下:

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

 

jQuery

 

复制代码代码如下:

$(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还提供了许多事件和方法，详情请查看其官网：

PHP

调用了autocomplete插件后，还并没有提示效果，别着急，因为需要调用数据源。
首先我们需要一张表，并要往表中添加适量数据，表的结构如下：

?

1 2 3 4 5

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形式输出。

?

1 2 3 4 5 6 7 8 9 10 11 12

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":"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 
\u62c9\u9009\u9879\u83dc\u5355"}, 
{"id":"4","title":"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 
\u533a\u57df"}] 

 

这时，再测试下输入，是不是看到你要的效果了呢？
最后，值得一提的是，autocomplete插件在firefox上有一个输入BUG，输入后并不能提示，需要向前空格再退格才有提示。网上有很多同学给出了解决方案，但是目前最新的autocomplete插件代码貌视进行了重构，我的解决方法是，在133行中加入如下代码：

?

1 2 3 4

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

转载于:https://www.cnblogs.com/jinshuo/p/6756596.html