我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息。本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验。
本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据。
XHTML
首先将jquery库和相关ui插件,以及css导入。
jQuery ui 插件可以在官网上下载:www.jqueryui.com
接着在body中写一个输入框:
jQuery$(function(){ $("#key").autocomplete({ source: "search.php", minLength: 2 }); });
一看就明白,调用autocomplete插件,数据源来自search.php,当用户输入1个字符的时候就调用数据源。autocomplte插件提供了几个可配置的参数:
disabled:是否在页面加载后不可用,默认为false,这个没必要设置成true,没有多大意义。
appendTo:输入时下拉的提示框追加元素,默认为"body"。
au