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 相关文章推荐
全文搜索和替换
Oct 09 PHP
PHP Memcached应用实现代码
Feb 08 PHP
基于curl数据采集之正则处理函数get_matches的使用
Apr 28 PHP
windwos下使用php连接oracle数据库的过程分享
May 26 PHP
php实现cookie加密的方法
Mar 10 PHP
codeigniter发送邮件并打印调试信息的方法
Mar 21 PHP
新浪微博OAuth认证和储存的主要过程详解
Mar 27 PHP
PHP实现图片上传并压缩
Dec 22 PHP
PHP 网站修改默认访问文件的nginx配置
May 27 PHP
PHP实现根据密码长度显示安全条
Jul 04 PHP
详解PHP 二维数组排序保持键名不变
Mar 06 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
Feb 11 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事务处理实例详解
2014/07/11 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
js+css在交互上的应用
2010/07/18 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
集体备课反思
2014/02/12 职场文书
大学新生军训方案
2014/05/03 职场文书
企业安全生产承诺书
2014/05/22 职场文书
节水标语大全
2014/06/11 职场文书
异地年检委托书范本
2014/09/24 职场文书
学校隐患排查制度
2015/08/05 职场文书
调研报告的主要写法
2019/04/18 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript