Rumah  >  Artikel  >  hujung hadapan web  >  jquery仿搜索自动联想功能代码_jquery

jquery仿搜索自动联想功能代码_jquery

WBOY
WBOYasal
2016-05-16 16:46:541654semak imbas
复制代码 代码如下:





Insert title here


<script> <BR>$(function(){ <BR>a(); <BR>onclick(); <BR>$("#txt").bind("keyup",function(){ <BR>txtchange(0); <BR>}); <br><br>}); <br><br>function a(){ <BR>ularray=[]; <BR>var data=[{1:11},{1:12},{1:22},{1:33},{1:123}]; <br><br>//给ul传入数据 <BR>var ul=$("#ul1"); <BR>$.each(data,function(index,item) <BR>{ <BR>var li=$("<li>"); <br><br>$.each(item,function(name,value) <BR>{ <BR>var span=$("<span>").html(value); <BR>li.append(span); <BR>ularray.push(value); <BR>}); <BR>ul.append(li); <BR>}); <br><br>//排序 <BR>ularray.sort(); <BR>}; <br><br>//keyup事件 <BR>function txtchange(flag) <BR>{ <BR>var textObj=$("#txt").val(); <BR>var divObj=$("#div1").html(); <BR>var array=[]; <br><br>with(divObj) <BR>{ <BR>var ulHTML=divObj.match(/<[^>]*>/)[0];//拿到开始标签 <BR>val = ularray+ ""; //转为字符串 <br><br>for(var i=0;i<ularray.length;i++) <BR>{ <BR>if(val.split(",")[i].indexOf(textObj)!==-1||flag) //分割成字符串数组 <BR>{ <BR>array[array.length]="<li><span>"+ularray[i]+""; <BR>}; <BR>};//把新得到的集合放入数组 <br><br>var liHtml = ""; <BR>$.each(array,function(item,val){ <BR>liHtml += val; <BR>});//去掉数组间逗号 <br><br>divObj=ulHTML+liHtml+""; <BR>$("#ul1").html(divObj); <BR>onclick(); //让新得到的数组拥有点击功能 <BR>}; <BR>}; <br><br>//span单击事件 <BR>function onclick(){ <BR>$("#ul1 li span").click(function() <BR>{ <BR>var oli=$(this); <BR>var otxt=$(this).html(); <BR>$("#txt").empty().val(otxt); <br><br>}); <BR>}; <BR></script>






自动提示








Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn