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 tip提示插件(实例分享)
Apr 28 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
python中list循环语句用法实例
2014/11/10 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
简单实现python收发邮件功能
2018/01/05 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python如何实现代码检查
2019/06/28 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
毕业生自我推荐
2013/11/04 职场文书
党员的自我评价范文
2014/01/02 职场文书
股东协议书
2014/04/14 职场文书
美丽人生观后感
2015/06/03 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang