jQuery+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 插件可以在官网上下载：www.jqueryui.com

接着在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还提供了许多事件和方法，详情请查看其官网：http://jqueryui.com/demos/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 ; 

									
版权声明
本文仅代表作者观点，不代表Csuper立场。
本文系作者授权百度百家发表，未经许可，不得转载。