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实现按比例缩放图片的方法
Apr 29 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现放大镜案例
Oct 19 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
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python右对齐的实例方法
2020/07/05 Python
公交公司毕业生求职信
2014/02/15 职场文书
进步之星获奖感言
2014/02/22 职场文书
机动车登记业务委托书
2014/10/08 职场文书
婚内分居协议书范文
2014/11/26 职场文书
实习工作表现评语
2014/12/31 职场文书
师德承诺书
2015/01/20 职场文书
医德医风个人总结
2015/02/28 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书