jquery实现input输入框输入值自动智能提示的实现

在web开发中,经常会做搜索功能,想要实现类似百度搜索那种,输入汉字后立马提示相关信息搜索,本文提供两种思路:


第一种:使用第三方js,只需要一行代码,不过搜索数据库信息比较多可能收费,网址:http://92find.com/

第二种:提供大概思路和代码。

 首先,肯定是要从数据库或者js自己定义要加载的内容,保存到schoolList中,可以从数据库中获取到数据然后放到js里面,贴代码:

 html输入框代码:

<div>
			<input type="text" id = "txt" name="addstuTSchool" class="addstuTSchool" placeholder="学校名" autocomplete="on" list="mylist" οnkeyup="search()"/>
			<datalist id="mylist"></datalist>
		</div>

js代码:


var schoolList = new Array();schoolList.push("北京大学");schoolList.push("清华大学");schoolList.push("复旦大学");
function search()
{   
	$("#mylist").empty();
	var tea_school=$('input.addstuTSchool').val();
	for(i = 1; i < schoolList.length; ++i)
	{
		if(tea_school != "" && schoolList[i].match(tea_school + ".*") != null)
		{
			var option="<option>"+ schoolList[i] +"</option>";  
        	$("#mylist").append(option);
		}
	}
}

 




  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值