快捷導(dǎo)航

jquery仿搜索自動(dòng)聯(lián)想功能代碼

更新時(shí)間：2014年05月23日 10:39:30 作者：

百度搜索自動(dòng)聯(lián)想提示效果，想必大家都有見到過吧，下面本文也為大家也是一個(gè)高仿的類似效果

 
<!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傳入數(shù)據(jù) 
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];//拿到開始標(biāo)簽 
val = ularray+ ""; //轉(zhuǎn)為字符串 

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

var liHtml = ""; 
$.each(array,function(item,val){ 
liHtml += val; 
});//去掉數(shù)組間逗號(hào) 

divObj=ulHTML+liHtml+"</ul>"; 
$("#ul1").html(divObj); 
onclick(); //讓新得到的數(shù)組擁有點(diǎn)擊功能 
}; 
}; 

//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" /> 
自動(dòng)提示 
<div id="div1"> 
<ul id="ul1" > 
</ul> 
</div> 
</form> 
</center> 
</body> 
</html> 

您可能感興趣的文章:

搜索

相關(guān)文章

jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹，需要的朋友可以參考下。
2011-11-11
jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼
本文通過代碼給大家介紹了jQuery模擬爆炸倒計(jì)時(shí)功能實(shí)例代碼，非常不錯(cuò)，代碼簡(jiǎn)單易懂，需要的朋友參考下吧
2017-08-08
jQuery選擇器之表單元素選擇器詳解
這篇文章主要為大家詳細(xì)介紹了jQuery選擇器之表單元素選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Jquery實(shí)現(xiàn)跨域異步上傳文件總結(jié)
本篇文章主要介紹了Jquery實(shí)現(xiàn)跨域異步上傳文件總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
jQuery oLoader實(shí)現(xiàn)的加載圖片和頁面效果
我們使用jQuery的ajax在頁面中就像使用iframe一樣加載其他頁面內(nèi)容，今天我給大家分享一個(gè)名叫jQuery oLoader的插件，該插件還集成了oPageLoader，可以輕松實(shí)現(xiàn)加載圖片和頁面的漂亮效果。
2015-03-03
jQuery使用children()找到特定元素的子元素
children()是jQuery中的內(nèi)置方法,用于查找與所選元素相關(guān)的所有子元素,?jQuery中的children()方法向下遍歷到所選元素的單個(gè)級(jí)別并返回所有元素,我們還可以在children()的參數(shù)中添加過濾器、使用children()來定位特定的子元素以及使用each()方法來迭代子元素等
2023-11-11
jquery使用Cookie和JSON記錄用戶最近瀏覽歷史
本文就是要利用cookie插件，獲取用戶瀏覽文章歷史記錄，并將用戶最近瀏覽歷史記錄顯示在頁面，感興趣的小伙伴們可以參考一下
2016-04-04
jQuery網(wǎng)頁定位導(dǎo)航特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁定位導(dǎo)航特效實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery網(wǎng)頁定位導(dǎo)航的功能描述、原理與核心實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-12-12
Jquery獲得控件值的三種方法總結(jié)
本篇文章主要是對(duì)Jquery獲得控件值的三種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery Ajax頁面局部加載方法匯總
jquery中實(shí)現(xiàn)ajax價(jià)值的方法有很多種，下面小編給大家介紹了jQuery Ajax頁面局部加載方法匯總，非常實(shí)用具有參考借鑒價(jià)值，感謝的朋友一起看下吧
2016-06-06