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

前端之家收集整理的这篇文章主要介绍了jquery实现搜索框功能实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

HTML代码

fhasjfas

  • fhasjfas

  • 你好

  • 你好啊

  • js:

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

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

    内容隐藏 //然后将含有keyword的li进行渐变显示 $("p").filter(":Contains("+keyword+")").parents('.todo-ltem').fadeIn(2000) } })

    效果如下:

    未筛选时:

    筛选后:

    总结

    以上所述是小编给大家介绍的jquery实现搜索功能实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/jquery/31394.html

    猜你在找的jQuery相关文章