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.οnmοuseοver=mup; newRow.οnmοuseοut=mout; var newCol = newRow.insertCell(0); newCol.innerHTML = "<div οnclick='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")); %>" οnkeyup="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;" οnclick="hide(this)">close</a>
</div>
</div>