Jquery 自动补全

function autoComplete(){
     //  inputArea auto  autoTable
	var highlightindex = -1;  // 表示当前高亮的节点
    var timeoutId = 0;  // 延迟请求对应timeout的id
    var timeMS = 1000; // 延迟请求的间隔时间
    var wordInput = $("#inputArea"); // 输入框
    wordInput.val("");  
    var wordInputOffset = wordInput.offset();
	$("#auto").css("background-color","white");  //给div设置显示时的背景色
		    
	 // 自动补全框最开始应该隐藏起来 	
	$("#auto").hide().css("border","1px #F0E68C solid").css("position","absolute")
		             .css("top",wordInputOffset.top - 37 + "px")
		             .css("left",wordInputOffset.left + "px").width(wordInput.width() - 3)
		             .css("z-index", 250).css("height", "200px").css("overflow", "auto");

	// 给输入框添加键盘弹起事件
    wordInput.keyup(function(event) {        
        var myEvent = event || window.event; //  处理文本框中的键盘事件
        var keyCode = myEvent.keyCode;
        // 1、如果输入的是字母，应该将文本框中最新的信息发送给服务器
        // 2、如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器
        // 空格键为：32
        if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46 || keyCode==32){
            // 1>>.首先获取文本框中的内容
            var wordText = $("#inputArea").val();           
            var autoNode = $("#auto");
            if ($.trim(wordText) != "") {  	
            	clearTimeout(timeoutId); // 清空上一次未开始执行的请求        	
            	// 延迟 处理
            	timeoutId = setTimeout(function(){
            		// 2>>.将文本框中的内容发送给服务器端
	               	$.ajax(
	               		{
               				type: "POST",
						    url: contextPath + "queryEmployeeIds",
						    data: {"userId" : wordText},
						    dataType:"json",
						    async:true,
			                success:function(data, state, jqXHR)
			                {
			                	var result = data.result; //  result[0].userId;				                			                	
			                	var s=""; // 进行遍历,并且让div显示			                	
			                	autoNode.html(""); // 需要清空原来的内容
			                	if(result != null || result.length > 0){
			                		$("#auto").show("slow");
			                		$.each(result,function(i){
			                			var newDivNode=$("<div>").attr("id",i);
			                			var user = result[i];
			                			newDivNode.html(user.userId).appendTo(autoNode);
			                			 // 增加鼠标进入事件，高亮节点
			                	        newDivNode.mouseover  
			                	        (
			                	        function(){
			                	        	// 将原来高亮的节点取消高亮
			                	        	if(highlightindex != -1){
			                	        		$("#auto").children("div").eq(highlightindex).css("background-color","white");
			                	        	}
			                	        	// 记录新的高亮索引
			                	        	highlightindex = $(this).attr("id");
			                	        	//设置鼠标进入的节点为高亮节点
			                	        	$(this).css("background-color","#6699CC");
			                	        });
			                	        // 鼠标移出节点，取消高亮
			                	        newDivNode.mouseout(function(){
			                	            	$(this).css("background-color","white");// 取消鼠标移出节点的高亮
			                	            });
			                	        // 增加鼠标点击事件，可以进行点击
			                	        newDivNode.click(function (){
			                	            var comText = $(this).text(); // 取出高亮节点的文本内容
			                	            $("auto").hide("slow");
			                	            document.getElementById('auto').style.display='none';
			                	            highlightindex = -1;
			                	            $("#inputArea").val(comText); // 文本框中的内容变成高亮节点的内容
			                	        });
			                		});
			                	}
			                	
			                	// 如果服务器端有数据返回，则显示弹出框
			                	if (result != null || result.length > 0) {
			                	    autoNode.show("slow");
			                	} else {   
			                		// 弹出框隐藏的同时，高亮节点索引值也制成-1
			                	    autoNode.hide("slow"); 			                	    
			                	    highlightindex = -1;
			                	}
			                },
			                failure : function(){alert("error");}
			              });
	              },timeMS); 
            	} 
        } else if (keyCode == 38 || keyCode == 40) {  // 如果输入的是向上38向下40按键			               
            	 var autoNodes = $("#auto").children("div");
                 // 向上
			     if (keyCode == 38) {			                	 
			         if (highlightindex != -1) {
			           // 如果原来存在高亮节点，则将背景色改成白色
			            autoNodes.eq(highlightindex).css("background-color","white");
			            highlightindex--;
			          } else {
			            highlightindex = autoNodes.length - 1;    
			          }
			          if (highlightindex == -1) {
				         // 如果 highlightindex--修改索引值以后index变成-1，则将索引值指向最后一个元素
				          highlightindex = autoNodes.length - 1;
			          }
			              // 让现在高亮的内容变成红色
			              autoNodes.eq(highlightindex).css("background-color","#6699CC");
			             
	                  }
			                			                
			       //向下
			       if (keyCode == 40) {			                	
			           if (highlightindex != -1) {
			                 // 如果原来存在高亮节点，则将背景色改称白色
			                  autoNodes.eq(highlightindex).css("background-color","white");
			            }
			            highlightindex++;
			           if (highlightindex == autoNodes.length) {
			                // 如果highlightindex++;修改索引值以后index变成autoNodes.length，则将索引值指向第一个元素
			                  highlightindex = 0;
			            }
			                 // 让现在高亮的内容变成红色
			                  autoNodes.eq(highlightindex).css("background-color","#6699CC");

			           }
	   } else if (keyCode == 13) {   // 如果输入的是回车			                	
			          // 下拉框有高亮内容
			         if (highlightindex != -1) {
			              // 取出高亮节点的文本内容
			              var comText = $("#auto").hide("slow").children("div").eq(highlightindex).text();
			              highlightindex = -1;
			              // 文本框中的内容变成高亮节点的内容
			              $("#inputArea").val(comText);
			          } else {
			              // 下拉框没有高亮内容
                          $("auto").hide("slow");
                          highlightindex = -1;
			              $("auto").get(0).blur();
			          }
	}});};