首页 > web前端 > js教程 > 正文

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

php中文网
发布: 2016-05-16 16:46:54
原创
1957人浏览过
复制代码 代码如下:





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>






自动提示








最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号