jquery實現搜索框功能實例詳解

2019-11-19 13:26:03

字體：大中小

來源：轉載

供稿：網友

搜索框實現搜索一個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)    }  })

效果如下：

未篩選時：