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


Posted in PHP onApril 27, 2015

我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息。本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验。

本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据。

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

XHTML

首先将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 插件可以在官网上下载:
接着在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插件后,还并没有提示效果,别着急,因为需要调用数据源。
首先我们需要一张表,并要往表中添加适量数据,表的结构如下:

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":"\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行中加入如下代码:

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

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

PHP 相关文章推荐
PHP4(windows版本)中的COM函数
Oct 09 PHP
用PHP实现小型站点广告管理
Oct 09 PHP
PHP设计模式之结构模式的深入解析
Jun 13 PHP
php的慢速日志引起的Mysql错误问题分析
May 13 PHP
php json_encode()函数返回json数据实例代码
Oct 10 PHP
ecshop实现smtp发送邮件
Feb 03 PHP
PHP内核探索:哈希表碰撞攻击原理
Jul 31 PHP
php视频拍照上传头像功能实现代码分享
Oct 08 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
Mar 30 PHP
php array_reverse 以相反的顺序返回数组实例代码
Apr 11 PHP
php设计模式之单例模式用法经典示例分析
Sep 20 PHP
php 防护xss,PHP的防御XSS注入的终极解决方案
Apr 01 PHP
PHP+jQuery+Ajax实现用户登录与退出
Apr 27 #PHP
php使用cookie实现记住用户名和密码实现代码
Apr 27 #PHP
php使用cookie实现记住登录状态
Apr 27 #PHP
php curl请求信息和返回信息设置代码实例
Apr 27 #PHP
PHP rsa加密解密使用方法
Apr 27 #PHP
PHP、Java des加密解密实例
Apr 27 #PHP
PHP永久登录、记住我功能实现方法和安全做法
Apr 27 #PHP
You might like
php调整服务器时间的方法
2015/04/03 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Vue精简版风格概述
2018/01/30 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
django Admin文档生成器使用详解
2019/07/22 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
当当网软件测试笔试题
2015/11/24 面试题
函授药学自我鉴定
2014/02/07 职场文书
研发工程师岗位职责
2014/04/28 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
毕业生个人自荐书
2015/03/05 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书