这是jquery的(de)搜索框输入提示下载,仿百度与google的(de)搜索框输入提示,支持键盘(pán)上下(xià)选择与鼠标点击选择(zé)。只包含前面代码,后台(tái)返回数(shù)据为模拟的数据。
jquery的搜索框输入(rù)提示(shì)是一个(gè)带有输入提示(shì)的html页面, 仿百度与google的搜索(suǒ)框输入提示,支(zhī)持键盘上下(xià)选(xuǎn)择与鼠(shǔ)标点击(jī)选择。只包含前面(miàn)代码,后台(tái)返回数据为模拟(nǐ)的数(shù)据(jù)。
通(tōng)过jquer来实现(A HTML page with input hints, implemented through jquer)。
jquery的搜索框输入(rù)提(tí)示输(shū)入、标签输入(rù)提示实例运用了JSON技术实现的ajax搜(sōu)索提示,当用户在搜索(suǒ)框输入内容时,可显示出可能的内容列表,会智能匹配搜索项,用户可通过鼠标选择(zé)这些匹配项,免去用户(hù)操作的麻烦。另外本效果也可用户标签输(shū)入提示(shì)效果(guǒ),匹配项会智能(néng)填充背景(jǐng),并添加(jiā)删(shān)除功能,在一些大网(wǎng)站,经常见到这种(zhǒng)效果,希望本源码(mǎ)会对你有所帮助。
1、fetched.php 搜索(suǒ)框或标签输入(rù)框的下拉提示内容(róng),一般(bān)情况(kuàng)下,此(cǐ)文件的内(nèi)容取自数据(jù)库,需要和MYSQL等结(jié)合,从(cóng)数据(jù)库(kù)中读取管理员或(huò)用户(hù)在添(tiān)加(jiā)文章(zhāng)时的标(biāo)签信息,按照数组(zǔ)格式生成在fetched.php中(zhōng)。
2、在(zài)form表单结束处,添加以下(xià)代码(mǎ)调(diào)用fetched.php看的内容,如下代码所示:
<script language="JavaScript">
$(document).ready(function() {
$.facebooklist('#facebook-demo', '#preadded', '#facebook-auto','fetched.php', 10);
});
</script>
3、用户通(tōng)过单击调用(yòng)显示(shì)在列表中的内容项,会(huì)自动将(jiāng)所选内容项(xiàng)添加到输入(rù)框中,无需手动输入。
