jQuery列表检索功能实现代码


Posted in jQuery onJuly 17, 2017

先给大家展示下效果图:

jQuery列表检索功能实现代码 

这是一个简单的列表 右上角有一个检索功能 我们要实现的是列表检索功能 是用的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 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
使用jQuery实现动态添加小广告
Jul 11 #jQuery
You might like
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
js闭包的用途详解
2014/11/09 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
通过Python实现一个简单的html页面
2020/05/16 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
会计实习自我鉴定
2013/12/04 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
奖学金个人总结
2015/03/04 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
保护环境的宣传语
2015/07/13 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server