搜索框的js实现

功能：在搜索框输入后能够根据首字来进行智能提示，可通过鼠标或者键盘来进行选择。

只是模拟了下功能，数据是HTML里的

的内容，回车功能可替换

HTML：

		搜索：
		

			
aac
			
avad
			
bjodf
			
ccc
			
cxz
			
bsad
			
carq
			
asd
		
	

JS：

/*
*	搜索框功能
*	数据是HTML里的li内容，可改从后台提取
*	只测试了英文，且只判断了首字母，可改进
*	回车的功能可替换成所需功能
*/

var search = (function() { //采用自执行函数方式编写，避免造成全局污染和变量改写。
	var doc = document, //存储document,减少全局查询次数
		oSearchBox = doc.getElementById("searchBox"),
		oUl = doc.getElementsByTagName("ul")[0], //IE8不支持getElementsByClassName,注意！
		oList = oUl.getElementsByTagName("li"),
		item = -1, //便于键盘事件的位置判断
		oShow = [], //存储显示的li
		oShowVal = []; //存储显示的li的innerHTML

	oSearchBox.focus(); //在搜索框定位光标

	var input = function(event) { //输入事件处理
		var oVal = oSearchBox.value, //获取输入值
			oListLen = oList.length; 

		if(oVal !== "") { //有输入时
			var oFirst = oVal.trim().substr(0,1); //获取输入值的第一个字母
		} else { //没有输入时，重置变量
			item = -1;
			oShow = [];
			oShowVal = [];
			for (var j = 0; j < oList.length; j++) {
				oList[j].className = "";
			}
		}

		for (var i = 0; i < oListLen; i++) {
			if(oList[i].innerHTML.substr(0,1) === oFirst) { //判断li的内容的首字母与输入的首字母是否一致
				oList[i].style.cssText = "display: block;"; //让一致的li显示
				if(oShow.indexOf(oList[i]) == -1) { //防止多次添加
					oShow.push(oList[i]); //将显示的li添加进数组，方便使用
					oShowVal.push(oList[i].innerHTML);
				}
				
				EventUtil.addHandler(oList[i],"mouseover",function() {
					this.className = "active";
				});
				EventUtil.addHandler(oList[i],"mouseleave",function() {
					this.className = "";
				});
				EventUtil.addHandler(oList[i],"click",function() {
					oSearchBox.value = this.innerHTML;
					alert("Start Search!");
				});

			} else {
				oList[i].style.cssText = "display: none;"; //与输入首字母不一致的则隐藏
			}
		}

		var e = event || window.event,
			key = e.which || e.keyCode,
			oShowLen = oShow.length;

		if(key === 13 && oVal) { //有输入时按回车直接搜索
			alert("Start Search!");
		}

		if(oShowLen !== 0) { //只当有li显示时才触发键盘事件
			switch(key) {
					case 38 :
						if(item === 0 || item === -1) {
							item = oShowLen;
						}
						for (var i = 0; i < oShowLen; i++) {
							if(oShow[i].className = "active") {
								oShow[i].className = "";
							}
						}
						oSearchBox.value = oShowVal[--item]; //将显示的li的内容替换到搜索框中的内容
						oShow[item].className = "active";
						break;
					case 40 :
						if(item === oShowLen-1) {
							item = -1;
						}
						for (var i = 0; i < oShowLen; i++) {
							if(oShow[i].className = "active") {
								oShow[i].className = "";
							}
						}
						oSearchBox.value = oShowVal[++item];
						oShow[item].className = "active";
						break;
					case 13 :
						for (var i = 0; i < oShowLen; i++) {
							if(oShow[i].className === "active") { //有选项时按回车就触发搜索
								alert("Start Search!");
							}
						}
						break;
					}
		}
	}

	return{ //返回函数接口
		input : input
	}

})()

EventUtil.addHandler(window,"load",search);
EventUtil.addHandler(window,"keyup",search.input);