AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作

<script type="text/javascript">
$(document).ready(function(){
var highlightIndex = -1;
    		$("#name").bind("keyup", function(event){    
    			document.getElementById("auto").style.display='block';
    			var keyCode = event.keyCode;
    			$("#log").html(keyCode);
    			if(keyCode >= 65 && keyCode <=90 || keyCode == 8 || keyCode == 46 || keyCode==32){
    	        //输入字母,退格或删除,显示最新的内容
    	          var enteredName = $("#name").val();
    	          if(typeof(enteredName) == undefined || 
    	        		  enteredName==""){
    	        	  return ;
    	          }
    	          $.ajax({
    	        		type: 'post',
    	        		url : '/ajax/ajax_building_listNames.action',
    	        		data:{'enteredName':enteredName},
    	        		success : function(data) {
    	        			$("#auto").html("");
    	        			if(data && data.length > 0){
    	        				var autoNode = $("#auto");
    	        				for(var i = 0; i < data.length; i++){
    	        					var newNode = $("<div>").attr("id", i);
    	        					newNode.html(data[i]).appendTo(autoNode);
    	        					newNode.mouseover(function(){
   	                                     $(this).css("background-color","gray");
    	        						 highlightIndex = $(this).attr("id");
    	        						 //alert(highlightIndex);
    	        					});
    	        					newNode.mouseout(function(){
    	                                 $(this).css("background-color","white");
    	                             });
    	        					newNode.click(function(){
    	        						$("#name").attr("value", $(this).text());
    	        						hightlightIndex = -1;
    	        						document.getElementById("auto").style.display='none';
    	        						
    	        					});
    	        				};
    	        			}
    	        		}
    	        	});
    	        }else if(keyCode == 13){    	        	
    	        	if(highlightIndex != -1){
	    	        	var selectNode = $("#auto").children("div").eq(highlightIndex);	    	        	
	    	        	if(selectNode){
							$("#name").attr("value", $(selectNode).text());   
							document.getElementById("auto").style.display='none';
	    	        	}
    	        	}
    	        	
    	        }else if(keyCode == 40 || keyCode == 38){
    	        	if(keyCode == 40){
    	        	//如果是向下
    	        	var autoNodes = $("#auto").children("div");
    	        	if(highlightIndex != -1){  	        	
    	        	//对当前选中的下一项的操作
    	        	var selectNode = autoNodes.eq(highlightIndex+1);
    	        	if(selectNode){
	    	        		$("#name").attr("value", $(selectNode).text());    	        		
	    	        		//改变当前高亮的索引值,让当前选中高亮
	    	        		selectNode.css("background-color","gray");
	    	        		//当前被选中去掉高亮
	    	        		var selectNode = autoNodes.eq(highlightIndex);
	    	        		selectNode.css("background-color","white");
    	        		}    	        	
    	        	}else if(highlightIndex == -1){
    	        		var selectNode = autoNodes.eq(highlightIndex+1);
    	        		selectNode.css("background-color","gray");
    	        	}
    	        	highlightIndex++;
    	        	
    	        	if(highlightIndex==autoNodes.length){
    	        	//如果索引值等于提示框中内容的数组长度,则指向最头一个元素
    	        	autoNodes.eq(highlightIndex).css("background-color","white");
    	        	highlightIndex = 0;
    	        	autoNodes.eq(highlightIndex).css("background-color","gray");
    	        	$("#name").attr("value", autoNodes.eq(highlightIndex).text());    
    	        	
    	        	}
    	        	
    	        }
    	        	if(keyCode == 38){
    	        	//如果是向上
    	        	var autoNodes = $("#auto").children("div");
    	        	if(highlightIndex != -1){
    	        	//对当前选中的上一项的操作    	        	
    	        	var selectNode = autoNodes.eq(highlightIndex-1);
    	        	if(selectNode){
	    	        		$("#name").attr("value", $(selectNode).text());  	    	        		
	    	        		//改变当前高亮的索引值,让当前选中高亮
	    	        		selectNode.css("background-color","gray"); 
	    	        		//当前被选中去掉高亮
	    	        		var selectNode = autoNodes.eq(highlightIndex);
	    	        		selectNode.css("background-color","white");
    	        		}    	
    	        	highlightIndex--;
    	        	}else if(highlightIndex == -1){
    	        		//如果索引值为-1,则指向最后一个元素
    	        		highlightIndex = autoNodes.length-1;
    	        		autoNodes.eq(highlightIndex).css("background-color","gray");
    	        	}   	
    	        }
    	       }
    		});
    		
    		//隐藏自动补全框,并定义css属性
    	    $("#auto").css("position","absolute")
    	    		  .css("z-index", 9999)
    	    		  .css("background-color", "white")
    	              .css("border","1px black solid")
    	              .css("top",$("#name").offset().top + $("#name").height() + 5 + "px")
    	              .css("left",$("#name").offset().left + "px")
    	              .width($("#name").width() + 2);
        });

      }

 });
 </script>