js搜索提示
程序员文章站
2022-06-12 21:12:13
...
<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; else return 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 class="tab-div cs-clear" > <div style="white-space:nowrap;"> <span class="cs-fl tab-div-tit">产品搜索:</span> <input id="product" onblur="if (value ==''){value=tip}" onclick="if(this.value==tip)this.value=''" onkeyup="searchProduct();" maxLength="50" size="16" value="汉字∣拼音∣首字母" type="text" class="ipt-t" /> <input value="搜索" type='button' onclick="searchOne();" /> </div> <div id='resultDiv' style="display: none;" class="prompt"> </div> </div> </div>
下一篇: html