検索ボックスのjsを実現します

		  ：
		

			
aac
			
avad
			
bjodf
			
ccc
			
cxz
			
bsad
			
carq
			
asd
		
	

/*
*	     
*	   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);