jquery实现搜索框功能实例详解


Posted in jQuery onJuly 23, 2018

搜索框实现搜索一个ul列表中的指定关键词的li。

html代码:

<ul class="todo-content">     
      <li class="todo-ltem">
        <div class="todo-tip">
          <p>fhasjfas</p>
        </div>
        <div class="todo-btnlist">
          <button class="btn-finish">完成</button>
          <button class="btn-finish">修改</button>
          <button class="btn-finish">删除</button>
        </div>
      </li>
      <li class="todo-ltem">
        <div class="todo-tip">
          <p>fhasjfas</p>
        </div>
        <div class="todo-btnlist">
          <button class="btn-finish">完成</button>
          <button class="btn-finish">修改</button>
          <button class="btn-finish">删除</button>
        </div>
<li class="todo-ltem">
        <div class="todo-tip">
          <p>你好</p>
        </div>
        <div class="todo-btnlist">
          <button class="btn-finish">完成</button>
          <button class="btn-finish">修改</button>
          <button class="btn-finish">删除</button>
        </div>
<li class="todo-ltem">
        <div class="todo-tip">
          <p>你好啊</p>
        </div>
        <div class="todo-btnlist">
          <button class="btn-finish">完成</button>
          <button class="btn-finish">修改</button>
          <button class="btn-finish">删除</button>
        </div>
      </li>
    </ul>

js:

当回车(keycode为13)按下时,获取输入框(id为findinput)的值,并保存在keyword关键字中,利用filter()对li进行筛选。

将原有内容隐藏,筛选出的内容进行渐变显示。

$('#findinput').keydown(function(event){
    if(event.keyCode == 13){
      var keyword = $(this).val()
      // alert(keyword)
      $('li').hide()//将原有的内容隐藏
      //然后将含有keyword的li进行渐变显示
      $("p").filter(":Contains("+keyword+")").parents('.todo-ltem').fadeIn(2000)
    }
  })

效果如下:

未筛选时:

jquery实现搜索框功能实例详解

筛选后:

jquery实现搜索框功能实例详解

总结

以上所述是小编给大家介绍的jquery实现搜索框功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
You might like
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python读写配置文件的方法
2015/06/03 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python的信号库Blinker用法详解
2020/12/31 Python
出纳岗位职责范本
2013/12/01 职场文书
小小的船教学反思
2014/02/21 职场文书
艾滋病宣传标语
2014/06/25 职场文书
化工实习心得体会
2014/09/09 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
民事赔偿协议书
2014/11/02 职场文书
明确岗位职责
2015/02/14 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
医院病假条怎么写
2015/08/17 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技