类google suggestion

1. js代码：

//google suggest start
	var taxonNameList = null;
	var index = 0;
	var size = 0;
	var taxonNameArray ;
	 //set the panel on the top of others
                $(document).ready(function(){
                     var left = $("#taxonQuery").offset().left;
                     var top = $("#taxonQuery").offset().top;
  
                     var panel = $("#taxonNameListPanel");
                     panel.css("left",left);
                     panel.css("top",top + 20);
                     panel.css("background","#fff");
                });	
	function taxonNameSuggest(e){
		//keyset
		var e2 = window.event||e;
		
		 var keyStr = e2.keyCode;
		
		 if(keyStr!=38&&keyStr!=40&&keyStr!=13){
			var key = $("#taxonQuery").val();
			var length = key.length;
			var panel =  $("#taxonNameListPanel");
			
			$.get("../taxonNameSuggest?suffix=" + key,function(data){
				taxonNameList = data;
				setTaxonNamePanel();
				panel.show();
			});
		}else{		
			if(keyStr==38){//up
					if(index!=size){
						if(index==-1)index = index +1;
						$("#taxonQuery").val(taxonNameArray[index]);
						$("#item" + index).css("background","gray");
						$("#item" + (index - 1)).css("background","");
						index=index+1;
					}
			}else if(keyStr==40){//down
					if(index!=-1){
						if(index==size)index = index-1;
						$("#taxonQuery").val(taxonNameArray[index]);
						$("#item" + index).css("background","gray");
						$("#item" + (index + 1)).css("background","");
						index=index-1;
					}
			}else{//enter
				hide();
				$("#searchButton").focus();
			}
		}
	}
	
	function setTaxonNamePanel(){
		taxonNameArray = taxonNameList.split(";");
		var table = document.getElementById("taxonNameTable");
		//delete all rows
		size = taxonNameArray.length-1;
		index = size - 1;
		for(i=table.rows.length-1;i>=0;i--){
			table.deleteRow(i);
		}
		
		for(i=0;i<taxonNameArray.length;i++){
			if(taxonNameArray[i]==null||taxonNameArray[i]=="")break;
			var newRow = table.insertRow(0);
			newRow.onmouseover=mup;
			newRow.onmouseout=mout;
			var newCol = newRow.insertCell(0);
			newCol.innerHTML = "<div onclick='setValue(this)' id='item" + i + "''>" + taxonNameArray[i] + "</div>";
		}
	}
	
	function mup(){
		$(this).css("background","gray");
	}
	
	function mout(){
		$(this).css("background","");
	}
	
	function setValue(t){
		$("#taxonQuery").val($(t).text());
		hide();
	}
	
	function hide(){
		$("#taxonNameListPanel").hide();
	}
	//end of google suggest
	

 

2. 页面代码：

<input id="taxonQuery" type="text" value="<%if(request.getParameter("taxonName")!=null) out.print(request.getParameter("taxonName")); %>" onkeyup="taxonNameSuggest(event)" />
<input id="searchButton" type="button" value="Search" onClick="taxonSearch();">
<div id="taxonNameListPanel" style="width: 155px; border: 1px solid #000; position: relative; left: 104px; top: 0px; display: none;">
	<table width="100%" id="taxonNameTable" style="cursor: hand;">
	</table>
	<div style="float: right;clear:both;">
		<a href="#" style="border: none; font-size: 12px;" onclick="hide(this)">close</a>
	</div>
</div>