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 Treegrid实现显示checkbox功能
Aug 08 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery插件实现搜索历史
Apr 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验证码(支持中文)
2007/02/14 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python实现的几个常用排序算法实例
2014/06/16 Python
python海龟绘图实例教程
2014/07/24 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
小学领导班子对照材料
2014/08/23 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Java实现简单小画板
2022/06/10 Java/Android