欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>