在web开发中,经常会做搜索功能,想要实现类似百度搜索那种,输入汉字后立马提示相关信息搜索,本文提供两种思路:
第一种:使用第三方js,只需要一行代码,不过搜索数据库信息比较多可能收费,网址:http://92find.com/
第二种:提供大概思路和代码。
首先,肯定是要从数据库或者js自己定义要加载的内容,保存到schoolList中,可以从数据库中获取到数据然后放到js里面,贴代码:
html输入框代码:
<div>
<input type="text" id = "txt" name="addstuTSchool" class="addstuTSchool" placeholder="学校名" autocomplete="on" list="mylist" onkeyup="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);
}
}
}