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 相关文章推荐
IIS+PHP+MySQL+Zend配置 (视频教程)
Dec 13 PHP
MySQL中create table语句的基本语法是
Jan 15 PHP
php防注
Jan 15 PHP
php 301转向实现代码
Sep 18 PHP
PHP 一个页面执行时间类代码
Mar 05 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
Jun 17 PHP
PHP中exec与system用法区别分析
Sep 22 PHP
PHP编程中的__clone()方法使用详解
Nov 27 PHP
php提交post数组参数实例分析
Dec 17 PHP
CodeIgniter配置之autoload.php自动加载用法分析
Jan 20 PHP
详谈PHP中的密码安全性Password Hashing
Feb 04 PHP
php 利用socket发送GET,POST请求的实例代码
Jul 04 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 数组实例说明
2008/08/18 PHP
php 地区分类排序算法
2013/07/01 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
异步加载script的代码
2011/01/12 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
使用JavaScript破解web
2018/09/28 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python的多态性实例分析
2015/07/07 Python
python中logging包的使用总结
2018/02/28 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
学生自我鉴定范文
2013/10/04 职场文书
业务助理岗位职责
2013/11/18 职场文书
个人简历自我评价
2014/01/06 职场文书
人事主管岗位职责
2014/01/30 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
人事部经理岗位职责
2014/03/07 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
关于分班的感言
2015/08/04 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技