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 Validate 校验多个相同name的方法
May 18 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现影院选座订座效果
Apr 13 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP实现事件机制的方法
2015/07/10 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
初识Javascript小结
2015/07/16 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
面试常见的js算法题
2017/03/23 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python元字符的用法实例解析
2018/01/17 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
视光学专业自荐信
2014/06/24 职场文书