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

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

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

 
<!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];//拿到開始標簽 
val = ularray+ ""; //轉為字符串 

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

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

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

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

您可能感興趣的文章:

搜索

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