jQuery列表检索功能实现代码
更新时间:2017年07月17日 09:41:27 作者:裴珞嘉
要实现一个简单的列表,右上角有一个检索功能我们要实现的是列表检索功能,具体实例代码大家参考下本文
先给大家展示下效果图:
这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的jquery实现的 具体代码如下
$(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]").val(); if($.trim(txt)!=""){ $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show(); }else{ $(".ggsm_list li").show(); } }); });
给按钮一个点击事件,首先获取到input中的值,然后让span的其它父元素都隐藏(其实就是隐藏掉其它的li标签)然后查找含有txt(就是input中值)的那一个li,然后显示出来
$("#textInput").on("keypress", function (e) { if (e.charCode === 13) { var txt=$("input[type=text]").val(); if($.trim(txt)!=""){ $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show(); }else{ $(".ggsm_list li").show(); } }
这个代码是对键盘回车键做的一个优化(代码不多很简单)
以上所述是小编给大家介绍的jQuery列表检索功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
jQuery使用after()方法在元素后面添加多项内容的方法
这篇文章主要介绍了jQuery使用after()方法在元素后面添加多项内容的方法,实例分析了jQuery中after方法的功能及在元素后面添加内容的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03jQuery实现select下拉框获取当前选中文本、值、索引
本篇文章主要介绍了jQuery实现select下拉框获取当前选中文本、值、索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05jQuery实现table中的tr上下移动并保持序号不变的实例代码
下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论