类google suggestion

r囧r小猫 2022-05-14 17:47 117阅读 0赞

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>