搜索
首页后端开发php教程jQuery+PHP+Mysql实现输入自动完成提示的功能

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

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



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

XHTML

首先将jquery库和相关ui插件,以及css导入。

<code>  <span><link> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"jquery.ui.autocomplete.css"</span><span>/></span>  <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"js/jquery.js"</span><span>></span><span></span>  <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.core.js"</span><span>></span><span></span>  <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.widget.js"</span><span>></span><span></span>  <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.position.js"</span><span>></span><span></span>  <span><script> <span>type</script></span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.autocomplete.js"</span><span>></span><span></span>  </span></code>

jQuery ui 插件可以在官网上下载:www.jqueryui.com

接着在body中写一个输入框:

<code>  <span><input> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <span>/></span>  </span></code>

jQuery

<code> 
$(<span>function</span>()<span>{</span> 
    $(<span>"#key"</span>).autocomplete(<span>{</span> 
        source: <span>"search.php"</span>, 
        minLength: <span>2</span> 
    <span>}</span>);  <span>}</span>);  </code>

一看就明白,调用autocomplete插件,数据源来自search.php,当用户输入1个字符的时候就调用数据源。autocomplte插件提供了几个可配置的参数:

disabled:是否在页面加载后不可用,默认为false,这个没必要设置成true,没有多大意义。

appendTo:输入时下拉的提示框追加元素,默认为"body"。

autoFocus:默认为false,当设置成true时,下拉提示框第一个将会是被选中的状态。

delay:加载数据时的延迟时间,默认为300,单位毫秒。

minLength:输入多少个字符时就会出现下拉提示,默认为1。

position:定义下拉提示框的位置。

source:定义数据源,数据源必须是json形式的,本例是通过请求search.php获取的数据源。

autocomplete还提供了许多事件和方法,详情请查看其官网:http://jqueryui.com/demos/autocomplete

PHP

调用了autocomplete插件后,还并没有提示效果,别着急,因为需要调用数据源。

首先我们需要一张表,并要往表中添加适量数据,表的结构如下:

<code> 
CREATE TABLE `art` ( 
  `id` int(<span>11</span>) NOT <span>NULL</span> auto_increment, 
  `title` varchar(<span>100</span>) NOT <span>NULL</span>, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;  </code>

请自行建表,并往表art中添加数据。

search.php实现了连接Mysql数据库,并根据前端用户的输入,查询并获取数据表中相匹配的内容,然后以JSON形式输出。

<code>  <span>include_once</span>(<span>"connect.php"</span>); <span>//连接数据库</span> 
  <span>$</span><span>q</span> = strtolower(<span>$_GET</span>[<span>"term"</span>]); <span>//获取用户输入的内容</span>  <span>$</span><span>query</span>=mysql_query(<span>"select * from art where title like '$q%' limit 0,10"</span>);  <span>//查询数据库,并将结果集组成数组</span>  <span>while</span> (<span>$</span><span>row</span>=mysql_fetch_array(<span>$</span><span>query</span>)) { 
    <span>$</span><span>result</span>[] = <span>array</span>( 
        <span>'id'</span> => <span>$</span><span>row</span>[<span>'id'</span>], 
        <span>'label'</span> => <span>$</span><span>row</span>[<span>'title'</span>] 
    ); 
}  <span>echo</span> json_encode(<span>$</span><span>result</span>);  <span>//输出JSON数据</span>  </code>

最后输出的JSON数据格式为:

<code> 
[<span>{</span><span>"id"</span>:<span>"3"</span>,<span>"title"</span>:"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 
\u62c9\u9009\u9879\u83dc\u5355"<span>}</span>,  <span>{</span><span>"id"</span>:<span>"4"</span>,<span>"title"</span>:"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 
\u533a\u57df"<span>}</span>]  </code>

这时,再测试下输入,是不是看到你要的效果了呢?

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

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


以上就介绍了jQuery+PHP+Mysql实现输入自动完成提示的功能,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP和Python:解释了不同的范例PHP和Python:解释了不同的范例Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程,但也支持面向对象编程(OOP);Python支持多种范式,包括OOP、函数式和过程式编程。PHP适合web开发,Python适用于多种应用,如数据分析和机器学习。

PHP和Python:深入了解他们的历史PHP和Python:深入了解他们的历史Apr 18, 2025 am 12:25 AM

PHP起源于1994年,由RasmusLerdorf开发,最初用于跟踪网站访问者,逐渐演变为服务器端脚本语言,广泛应用于网页开发。Python由GuidovanRossum于1980年代末开发,1991年首次发布,强调代码可读性和简洁性,适用于科学计算、数据分析等领域。

在PHP和Python之间进行选择:指南在PHP和Python之间进行选择:指南Apr 18, 2025 am 12:24 AM

PHP适合网页开发和快速原型开发,Python适用于数据科学和机器学习。1.PHP用于动态网页开发,语法简单,适合快速开发。2.Python语法简洁,适用于多领域,库生态系统强大。

PHP和框架:现代化语言PHP和框架:现代化语言Apr 18, 2025 am 12:14 AM

PHP在现代化进程中仍然重要,因为它支持大量网站和应用,并通过框架适应开发需求。1.PHP7提升了性能并引入了新功能。2.现代框架如Laravel、Symfony和CodeIgniter简化开发,提高代码质量。3.性能优化和最佳实践进一步提升应用效率。

PHP的影响:网络开发及以后PHP的影响:网络开发及以后Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP类型提示如何起作用,包括标量类型,返回类型,联合类型和无效类型?PHP类型提示如何起作用,包括标量类型,返回类型,联合类型和无效类型?Apr 17, 2025 am 12:25 AM

PHP类型提示提升代码质量和可读性。1)标量类型提示:自PHP7.0起,允许在函数参数中指定基本数据类型,如int、float等。2)返回类型提示:确保函数返回值类型的一致性。3)联合类型提示:自PHP8.0起,允许在函数参数或返回值中指定多个类型。4)可空类型提示:允许包含null值,处理可能返回空值的函数。

PHP如何处理对象克隆(克隆关键字)和__clone魔法方法?PHP如何处理对象克隆(克隆关键字)和__clone魔法方法?Apr 17, 2025 am 12:24 AM

PHP中使用clone关键字创建对象副本,并通过\_\_clone魔法方法定制克隆行为。1.使用clone关键字进行浅拷贝,克隆对象的属性但不克隆对象属性内的对象。2.通过\_\_clone方法可以深拷贝嵌套对象,避免浅拷贝问题。3.注意避免克隆中的循环引用和性能问题,优化克隆操作以提高效率。

PHP与Python:用例和应用程序PHP与Python:用例和应用程序Apr 17, 2025 am 12:23 AM

PHP适用于Web开发和内容管理系统,Python适合数据科学、机器学习和自动化脚本。1.PHP在构建快速、可扩展的网站和应用程序方面表现出色,常用于WordPress等CMS。2.Python在数据科学和机器学习领域表现卓越,拥有丰富的库如NumPy和TensorFlow。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。