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

我们在许多项目中使用搜索功能来帮助用户更快、更准确地找到所需信息。本文将介绍如何实现用户输入的自动提示功能。就像谷歌百度搜索引擎一样，当用户输入关键词时，在输入框底部会有一个提示，里面会显示与关键词相关的信息供用户选择，从而提升用户体验。

本文将使用jquery ui的自动完成插件，结合后端PHP，数据源将通过PHP读取mysql数据表的数据。

可扩展的超文本标记语言

导入jquery库、相关的ui插件和css。

复制的代码如下：Link rel='样式表' href=' jquery . ui . autocomplete . CSS '/script type=' text/JavaScript ' src=' http 3360 js/jquery . js '/脚本脚本类型=' text/JavaScript ' src=' http : ui/jquery . ui . core . js '/脚本脚本脚本类型=' text/JavaScript ' src=' http 3360 ui/jquery

jQuery ui插件可以在官网下载；然后在正文中写一个输入框：

复制代码的代码如下：输入类型=' text' id=' key' name=' key'/

jQuery

复制代码如下： $ (function () {$ ('# key ')。自动完成({source:' search.php '，minlength : 2 })；});

乍一看，很明显当调用自动完成插件时，数据源来自search.php，当用户输入一个字符时，数据源被调用。Autocomplte插件提供了几个可配置的参数：禁用：加载后页面是否不可用；默认值为false没有必要将此设置为true，这没有什么意义。appendo:输入时下拉提示框追加元素，默认值为‘body’。自动对焦：默认值为假。设置为true时，将选择第一个下拉提示框。延迟：加载数据时的延迟时间。默认值为300，以毫秒为单位。MinLength:输入多少字符会出现下拉提示，默认值为1。位置：定义下拉提示框的位置。Source:定义数据源，数据源必须是json形式。在本例中，数据源是通过请求search.php获得的。自动完成还提供了很多事件和方法，详情请查看其官网：

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

调用自动完成插件后，没有提示效果。别担心，因为你需要调用数据源。首先，我们需要一个表，并向表中添加适量的数据。表格的结构如下：

CREATE TABLE ` art `(` id ` int(11)NOT NULL auto _ increment，` title` varchar(100) NOT NULL，PRIMARY KEY(` id `))ENGINE=MyISAM DEFAULT CHARSET=utf8；请创建您自己的表格并将数据添加到表格艺术中。

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

include _ once(' connect . PHP ')；//连接到数据库$ q=strtolow($ _ GET[' term '])；//获取用户输入$ query=MySQL _ query(' select * from art，其中title类似' $ q%' limit 0，10 ')；//查询数据库并将结果集分组到一个数组中，同时($ row=MySQL _ fetch _ array($ Query)){ $ result[]=array(' id '=$ row[' id ']，' label '=$ row[' title '])；} echo JSON _ encode($ result)；//输出JSON数据JSON数据最终输出的格式是：

复制的代码如下： [{'ID' :' 3 '，' Title ' : ' \ U4F7f \ u 7528 CSS \ u 548 cjquery \ u 5236 \ U4F5c \ u 602 \ U4EAE \ u 7684 \ U4E0B { ' ID ' : ' 4 '，' Title ' : ' \ U4F7f \ u 7528 jquery \ u 548 ccss

这时，再次测试输入，你看到你想要的效果了吗？最后值得一提的是，自动完成插件在firefox中有一个输入BUG，输入后无法提示，只需要向前空格后退格即可提示。网上很多同学都给出了解决方案，但是最新的自动补全插件代码已经重构。我的解决方案是在133行中添加以下代码：修复FF不支持bind ('input.autocomplete '，function(){//Chinese bug self . search(self . item)；});以上就是本文的全部内容，希望大家喜欢。