类google suggestion

icarusliu

1. js代码：
//google suggest startvar 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){//keysetvar 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){//upif(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){//downif(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{//enterhide();$("#searchButton").focus();}}}function setTaxonNamePanel(){taxonNameArray = taxonNameList.split(";");var table = document.getElementById("taxonNameTable");//delete all rowssize = 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" ><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;" >close</a></div></div>