本文将使用jqueryui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据,有需要的朋友可以参考一下。

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

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

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":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b
u62c9u9009u9879u83dcu5355"},
{"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370
u533au57df"}]

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

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

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

最新资讯
“虾米”终究干不过大鱼

“虾米”终究干不过大

或许自几年前输掉版权大战,从在线音乐领域TOP1的位置跌
比特币价格创历史新高 美股区块链板块大涨

比特币价格创历史新高

比特币站上19500美元/枚,日内涨超1300美元,突破2017年12
华为成为俄罗斯在线出(bu)售(mai)智能手机的第一品牌

华为成为俄罗斯在线出

根据Counterpoint Technology Market Research进行的
比特币价格今年上涨150% 短期内有望突破2万美元

比特币价格今年上涨15

比特币价格近日再次攀升,并收复了3月份以来所损失的绝
搜房控股收到每股1.468美元的无约束力私有化报价

搜房控股收到每股1.46

搜房控股董事会收到General Atlantic Singapore Fund
通用汽车将不再持股Nikola,后者被指存在欺诈

通用汽车将不再持股Ni

根据新协议,双方的合作规模有所减小,该协议保留了两家公
最新文章
PHP数据源架构模式之表入口模式实例分析

PHP数据源架构模式之

这篇文章主要介绍了PHP数据源架构模式之表入口模式,结
php面向对象基础详解【星际争霸游戏案例】

php面向对象基础详解

这篇文章主要介绍了php面向对象基础,结合星际争霸游戏
php设计模式之抽象工厂模式分析【星际争霸游戏案例】

php设计模式之抽象工

这篇文章主要介绍了php设计模式之抽象工厂模式,结合星
php设计模式之建造器模式分析【星际争霸游戏案例】

php设计模式之建造器

这篇文章主要介绍了php设计模式之建造器模式,结合星际
php的RSA加密解密算法原理与用法分析

php的RSA加密解密算法

这篇文章主要介绍了php的RSA加密解密算法原理与用法,
laravel框架模型和数据库基础操作实例详解

laravel框架模型和数

这篇文章主要介绍了laravel框架模型和数据库基础操作,