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>