php 自动完成输入模板,PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_PHP教程...

$(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);

});

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

http://www.bkjia.com/PHPjc/990985.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/990985.htmlTechArticlePHP结合jQuery.autocomplete插件实现输入自动完成提示的功能 我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息。本文...

相关标签：PHP

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议我要评论

立即提交

专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习