js搜索提示
<script src="jquery-1.4.2.js" type="text/javascript"></script><style>.prompt{border:1px solid #d6dce0; background:#fff; position:absolute; z-index:999}.prompt p{line-height:25px; height:25px; overflow:hidden; padding:0 10px}.prompt .hover{background:#ebebeb; cursor:default}</style><script type="text/javascript"> String.prototype.startWith=function(str){if(str==null||str==""||this.length==0||str.length>this.length)return false;if(this.substr(0,str.length)==str)return true;elsereturn false;return true;}function Product(name,pinYin,firstPinYin,product){if(name==null){name="";}if(firstPinYin==null){firstPinYin="";}if(product==null){product="";}this.name=name;this.pinYin=pinYin.toLowerCase();this.firstPinYin=firstPinYin.toLowerCase();this.product=product.toLowerCase();}var arrayObj = new Array();arrayObj.push(new Product('abc','abc','abc','abc'));arrayObj.push(new Product('abd','abd','abd','abd'));arrayObj.push(new Product('acd','acd','acd','acd'));arrayObj.push(new Product('bfd','bfd','bfd','bfd'));arrayObj.push(new Product('ebd','ebd','ebd','ebd'));var oldlength=0;var oldvalue="";var index=0;var tip='汉字∣拼音∣首字母';function searchProduct(){//校验一下var product=$("#product").val();if(product!=null){product=trim(product);product=product.toLowerCase();if(product!=""){var length=product.length;if(length!=oldlength||product!=oldvalue){oldlength=length;oldvalue=product;doSearch(product);}return;}}hiddenDiv();}function trim(str){return str.replace(/^\s+/g,"").replace(/\s+$/g,"");}function gotoProductPage(product){alert(product);}//搜索是否存在function doSearch(product){var isFound=false;var resultArr = new Array();for(var j=0,k=arrayObj.length;j<k;j++){var obj=arrayObj[j];if(obj.name.indexOf(product)>-1||obj.pinYin.indexOf(product)>-1||obj.firstPinYin.indexOf(product)>-1){isFound=true;resultArr.push(obj);}}if(isFound){var tableStr="<table id='resultTable' width='100%'>";sortArr(resultArr,product);if(resultArr.length>=10){var arr = new Array();for(var i=0;i<10;i++){arr.push(resultArr[i]);}resultArr=arr;}for(var i=0,l=resultArr.length;i<l;i++){var obj=resultArr[i];tableStr+="<tr index='"+(i+1)+"' product='"+obj.product+"' onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" ><td><p class='searchP'>"+obj.name+"</p></td></tr>";}showDiv(tableStr+"</table>");}else{index=0;$("#resultDiv").css("display","none");}}//产品排序function sortArr(arr,prefix){for(var i=0,l=arr.length;i<l;i++){for(var j=i+1;j<l;j++){if(compareProduct(arr[i],arr[j],prefix)>=1){var s=arr[i];arr[i]=arr[j];arr[j]=s;}}}}function compareProduct(a,b,prefix){if(compare(a,prefix)){if(compare(b,prefix)){return a.pinYin.localeCompare(b.pinYin);}return -1;}if(compare(b,prefix)){return 1;}return a.pinYin.localeCompare(b.pinYin);}function compare(a,prefix){if(a.firstPinYin.startWith(prefix)||a.pinYin.startWith(prefix)||a.name.startWith(prefix)){return true;}return false;}function showDiv(str){$("#resultDiv").html(str);$("#resultDiv").css("display","block");}function hiddenDiv(){index=0;oldlength=0;oldvalue="";$("#resultDiv").css("display","none");}//搜索是否只有一个结果function searchOne(){var product=$("#product").val();if(product==null||trim(product)==""||product==tip){return;}var result="";var i=0;for(var j=0,k=arrayObj.length;j<k;j++){var obj=arrayObj[j];if(obj.name.indexOf(product)>-1||obj.pinYin.indexOf(product)>-1||obj.firstPinYin.indexOf(product)>-1){i++;if(i>1){break}result=obj.product;}}if(i==1){gotoProductPage(result);}else{showDiv("<div class='msg'>抱歉，没有找到<span>"+product+"</span>相关的产品</div>");}}function mouseOver(obj){$("#resultTable").find("tr[index="+index+"]").removeClass("hover");$(obj).addClass("hover");index=~~$(obj).attr("index");}function mouseOut(obj){$(obj).removeClass("hover");}$(document).mousedown(function(e){ var className;if(document.all==null){if(e.button==0){//鼠标左键 className=e.target.className;}}else{ ev = document.all ? window.event : e; if(ev.button==1) { //鼠标左键 className=ev.srcElement.className; }}if("searchP"==className){var product=$("#resultTable").find("tr[index="+(index)+"]").attr("product");if(product!=null){gotoProductPage(product);}}else{hiddenDiv(); }}); $(document).keydown(function(e){ var ev if(document.all==null){ev=e;}else{ev = document.all ? window.event : e; }if(ev.keyCode==13) { //回车键 if(index>0){var product=$("#resultTable").find("tr[index="+(index)+"]").attr("product");if(product!=null){gotoProductPage(product);}}else{searchOne(); }}else if(ev.keyCode==38){//上if(index>1){$("#resultTable").find("tr[index="+index+"]").removeClass("hover");$("#resultTable").find("tr[index="+(index-1)+"]").addClass("hover");index--;}}else if(ev.keyCode==40 ){//下var obj=$("#resultTable").find("tr[index="+(index+1)+"]");if(obj.length>0){$("#resultTable").find("tr[index="+index+"]").removeClass("hover");obj.addClass("hover");index++;}}} ); </script><div ><div ><div style="white-space:nowrap;"><span onblur="if (value ==''){value=tip}" onclick="if(this.value==tip)this.value=''" onkeyup="searchProduct();" maxLength="50" size="16" value="汉字∣拼音∣首字母" type="text" /><input value="搜索" type='button' onclick="searchOne();" /></div><div id='resultDiv'style="display: none;" class="prompt"></div></div></div>