jquery 实现智能提示

/**
 * @author zhangxq
 * @param  inputid
 * 输入框的ID  
 * 初始化里面的keyword 为输入框的ID
 */

//{border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}
$(document).ready(function(){
	$("#keyword").css({"padding":"5px 8px 2px 6px","height":"24px","font-size":"large","border":"solid","border-width":"1px thin  thin 1px","border-color":"#CCCCCC #999999 #999999 #CCCCCC"});
	$("#keyword").attr("title","搜罗搜索");
});
var key_value  = 0;//键盘对应的值
InTellMsg	= function  (inputid ,arr) {
	  removediv();
	  inputid  = "#"+inputid;
	  var width = $(inputid).outerWidth();
	  var input_postion =  $(inputid).position();
	  var table =  $("<table></table>").attr("id","msg_table");
	  $("#msg_table").css({"border":"solid 1px red"});
	  var cur_value = 0;
	  var mouse_cur_value = 0;
	  var flag ="true";
	  var pre_flag = "next";
	  $("<div ></div>").attr("id","intellmsgdiv").appendTo(document.body);
	  $("#intellmsgdiv").css({"width":width-2,"vertical-align":"top","height":"auto",
		  "position":"absolute","left":input_postion.left,"top":input_postion.top+29+"px",
		  "margin-top":"-1px","z-index":"100","border":"solid", "border-color":"#A2BFF0 #558BE3 #558BE3 #A2BFF0","border-width":"1px","overflow":"hidden"});  

	  $("#intellmsgdiv").append(table);
	  var num =arr.length;
	  for(var i=0;i< arr.length ;i++){
	  	$("#msg_table").append("<tr  height='25px' style='font-size: 18px;'><td style='padding-left:8px;'>"+arr[i]+"</td></tr>");
	  }
//	  $("#msg_table").css({"width":(width+3)+"px", "border":"10px"});
	  $("#msg_table").css({"background":"white","width":(width+3)+"px","margin":"-2px -3px -2px -2px","overflow":"hidden"});

	  $("#msg_table tr").hover( 
	  		  function () {
	  		  	  if(flag =="true"){
		  		  	  var trs =  table.children().children();
		  		  	  var index = cur_value-1 ;
		  		  	  if(cur_value== 0 ){
		  		  	  	 index =  0;
		  		  	  }
				      $(trs[index]).addClass("tr_off");
		  		  	  $(trs[index]).removeClass("tr_on");

				  	  $(this).addClass("tr_on");
				  	  $(this).removeClass("tr_off");
				  	  cur_value = $(this).index() ; 
				  	  mouse_cur_value = $(this).index() ; 
			  	  }
			  },
			  function (){
			     $(this).addClass("tr_off");
			  	 $(this).removeClass("tr_on");
			  }
		);
	  document.onkeydown   =  function(event){
		  	var currdiv = document.getElementById('intellmsgdiv');
		  	event = (event) ? event : window.event;
		  	key_value  = event.keyCode ;
			var key =  event.keyCode ;
			var trs =  table.children().children();
			var index =0;
			var tds;
			var tr_num =  trs.length ;
			if(key=='40'){

				if(pre_flag=="pre"){
					cur_value ++;
				}
				pre_flag ="next";
				flag = "false";

				$(trs[mouse_cur_value]).addClass("tr_off");
				$(trs[mouse_cur_value]).removeClass("tr_on");

				if(cur_value!= tr_num ){

					$(trs[cur_value -1]).addClass("tr_off");
					$(trs[cur_value -1]).removeClass("tr_on");
				} 

				$(trs[cur_value]).addClass("tr_on");
				$(trs[cur_value]).removeClass("tr_off");

				 cur_value ++;
				 if(cur_value>tr_num){
				 	cur_value = tr_num ;
				 }

				 // 这个计算和下面的计算放置的位置不一样,所以会出现不同的结果
			 	if(cur_value==0){
					index = cur_value;
				}else if(cur_value==tr_num){
					index = tr_num -1;
				}else{
					index = cur_value -1 ;
				}
			 	tds = $(trs[index]).children();
			 	if(currdiv!=null){
			 		$(inputid).val($(tds[0]).text());//set value
			 	}
			}else if(key =='38'){

				if(pre_flag=="next"){
					cur_value  --;
				}

				pre_flag = "pre";
				if(cur_value == tr_num){
					index = tr_num -1;
				}else if(cur_value == 0){
					index = cur_value;
				}else{
					index = cur_value -1 ;
				}

				if(cur_value != 0){
					$(trs[cur_value]).addClass("tr_off");
					$(trs[cur_value]).removeClass("tr_on")
				}

				$(trs[cur_value -1]).addClass("tr_on");
				$(trs[cur_value -1]).removeClass("tr_off");

				cur_value --;
				if(cur_value < 0){
				 	cur_value = 0 ;
				 }
				tds = $(trs[index]).children();
				if(currdiv!=null){
					$(inputid).val($(tds[0]).text());//set value
				}
			}
			flag = "false";



		};
		$("#msg_table").bind("mousemove",function(event){
			flag = "true";
		});
		$("#msg_table td").bind("click",function(event){
			$(inputid).val($(this).text());
		});

}
removediv = function(){
	$("#intellmsgdiv").remove();
}

document.onclick = function(){
	removediv();
}


searchIntell = function(inputid ,inputval){
	if(key_value ==38 || key_value ==40 || key_value == 37 || key_value == 39|| key_value == 16){
		return false;
	}
	 var v =  $("#"+inputid).val();
	 if(v==null || v==""){
		 return false;
	 }
	 var arr = new Array(10);
	 for(var i=0;i<10;i++){
		 arr[i]=i;
	 }
	 InTellMsg(inputid,arr);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.tr_on {background-color:#D5E2FF;height:25px;}; 
	.tr_off {background-color:white;height:25px;};
</style>
  <script type="text/javascript" src="jquery1.4.js"></script>
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
		<center>
			<form action="./searchpicture.do" id="form1" method="get" >
					 <input type="text" autocomplete="off" id="keyword" style="width:500px" value="" name ="keyword"   onkeyup="searchIntell('keyword',this.value);" />
					<input type="button" value="搜索搜索"   >  
			</form>
		</center>
</body>
</html>

PS:本人样式是在差，需要的朋友可以自行修改