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;
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>