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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
简单的辞职信范文
2014/01/18 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
空气环保标语
2014/06/12 职场文书
应届大专生求职信
2014/06/26 职场文书
继承公证书格式
2015/01/26 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
Python中npy和mat文件的保存与读取
2022/04/24 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server