首页 > 网站 > 建站经验 > 正文

【PHP教程】PHP结合jQuery.autocom,plete插件实现输入自动完成提

2019-11-02 15:39:44
字体:
来源:转载
供稿:网友

我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息。下面电脑高手网小编给大家摘录一篇关于PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能介绍,有需要的小伙伴可以参考下,希望可以给正在学习PHP知识的朋友一些帮助或建议。本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验。

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

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

XHTML

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

 

代码如下:
<link rel="stylesheet" href="jquery.ui.autocomplete.css"/>
搞笑gif[www.62-6.com]
;
<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插件后,还并没有提示效果,别着急,因为需要调用数据源。
首先我们需要一张表,并要往表中添加适量数据,表的结构如下:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表