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>