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 实现图片的依次加载图片功能
Jul 06 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 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
php实现webservice实例
2014/11/06 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php实现json编码的方法
2015/07/30 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python 一句话生成字母表的方法
2019/01/02 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python django中8000端口被占用的解决
2019/12/17 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
建筑总经理岗位职责
2014/02/02 职场文书
法律专业求职信
2014/05/24 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
接收函格式
2015/01/30 职场文书
2015年超市员工工作总结
2015/05/04 职场文书