功能:在搜索框输入后能够根据首字来进行智能提示,可通过鼠标或者键盘来进行选择。
只是模拟了下功能,数据是HTML里的<li>的内容,回车功能可替换
HTML:
<div class="wrap">
搜索:<input type="text" id="searchBox" class="search-box" />
<ul class="list-box">
<li>aac</li>
<li>avad</li>
<li>bjodf</li>
<li>ccc</li>
<li>cxz</li>
<li>bsad</li>
<li>carq</li>
<li>asd</li>
</ul>
</div>
JS:
/*
* 搜索框功能
* 数据是HTML里的li内容,可改从后台提取
* 只测试了英文,且只判断了首字母,可改进
* 回车的功能可替换成所需功能
*/
var search = (function() { //采用自执行函数方式编写,避免造成全局污染和变量改写。
var doc = document, //存储document,减少全局查询次数
oSearchBox = doc.getElementById("searchBox"),
oUl