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

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

HTML代码：

rush:js;">

odo-content">
• odo-ltem">
  odo-tip">

  fhasjfas

  odo-btnlist"> 修改 删除
• odo-ltem">
  odo-tip">

  fhasjfas

  odo-btnlist"> 修改 删除
• odo-ltem">
  odo-tip">

  你好

  odo-btnlist"> 修改 删除
• odo-ltem">
  odo-tip">

  你好啊

  odo-btnlist"> 修改 删除

js:

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

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

rush:js;"> $('#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实现搜索框功能实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/jquery/31394.html