jquery仿搜索自动联想功能代码-Web前端之家

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<style type="text/css"> 
body{margin:0px;padding:0px;} 
ul{margin:px;padding:0px;list-style-type:none;} 
</style> 
<script src="jquery-1.8/jquery-1.8.0.js"></script> 
<script> 
$(function(){ 
a(); 
onclick(); 
$("#txt").bind("keyup",function(){ 
txtchange(0); 
}); 

}); 

function a(){ 
ularray=[]; 
var data=[{1:11},{1:12},{1:22},{1:33},{1:123}]; 

//给ul传入数据 
var ul=$("#ul1"); 
$.each(data,function(index,item) 
{ 
var li=$("<li></li>"); 

$.each(item,function(name,value) 
{ 
var span=$("<span></span>").html(value); 
li.append(span); 
ularray.push(value); 
}); 
ul.append(li); 
}); 

//排序 
ularray.sort(); 
}; 

//keyup事件 
function txtchange(flag) 
{ 
var textObj=$("#txt").val(); 
var divObj=$("#div1").html(); 
var array=[]; 

with(divObj) 
{ 
var ulHTML=divObj.match(/<[^>]*>/)[0];//拿到开始标签 
val = ularray+ ""; //转为字符串 

for(var i=0;i<ularray.length;i++) 
{ 
if(val.split(",")[i].indexOf(textObj)!==-1||flag) //分割成字符串数组 
{ 
array[array.length]="<li><span>"+ularray[i]+"</span></li>"; 
}; 
};//把新得到的集合放入数组 

var liHtml = ""; 
$.each(array,function(item,val){ 
liHtml += val; 
});//去掉数组间逗号 

divObj=ulHTML+liHtml+"</ul>"; 
$("#ul1").html(divObj); 
onclick(); //让新得到的数组拥有点击功能 
}; 
}; 

//span单击事件 
function onclick(){ 
$("#ul1 li span").click(function() 
{ 
var oli=$(this); 
var otxt=$(this).html(); 
$("#txt").empty().val(otxt); 

}); 
}; 
</script> 
</head> 

<body > 
<center> 
<form> 
<input id="txt" type="text" /> 
自动提示 
<div id="div1"> 
<ul id="ul1" > 
</ul> 
</div> 
</form> 
</center> 
</body> 
</html> 