jquery實現(xiàn)搜索框功能實例詳解
更新時間:2018年07月23日 11:04:16 作者:TAO_GIS
這篇文章主要介紹了jquery實現(xiàn)搜索框功能,搜索框實現(xiàn)搜索一個ul列表中的指定關鍵詞的li。具體實現(xiàn)代碼大家參考下本文
搜索框實現(xiàn)搜索一個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進行篩選。
將原有內(nèi)容隱藏,篩選出的內(nèi)容進行漸變顯示。
$('#findinput').keydown(function(event){ if(event.keyCode == 13){ var keyword = $(this).val() // alert(keyword) $('li').hide()//將原有的內(nèi)容隱藏 //然后將含有keyword的li進行漸變顯示 $("p").filter(":Contains("+keyword+")").parents('.todo-ltem').fadeIn(2000) } })
效果如下:
未篩選時:
篩選后:
總結
以上所述是小編給大家介紹的jquery實現(xiàn)搜索框功能實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
jQuery 過濾方法filter()選擇具有特殊屬性的元素
需要選出所有有背景圖片的元素,使用jQuery的DOM過濾方法filter(),可以根據(jù)函數(shù)中表達的任何條件選擇元素,需要的朋友可以參考下2014-06-06jquery通過擴展select控件實現(xiàn)支持enter或focus選擇的方法
這篇文章主要介紹了jquery通過擴展select控件實現(xiàn)支持enter或focus選擇的方法,通過jQuery針對select空間增加enter及focus選擇功能分析了jQuery擴展的相關實現(xiàn)技巧,需要的朋友可以參考下2015-11-11jQuery插件PageSlide實現(xiàn)左右側欄導航菜單
jQuery pageSlide 是一個可以讓網(wǎng)頁出現(xiàn)滾動效果的jQuery插件,它可以控制一個隱藏頁面的顯示和關閉。具體來說,就是當前頁占一個完整頁面,隱藏頁是看不到的,你設置一個控制的地方,點擊該控制時觸發(fā)事件,隱藏的頁面就滑出來,再次點擊隱藏頁面以外的地方,它就又關閉2015-04-04