jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解
搜索框?qū)崿F(xiàn)搜索一個(gè)ul列表中的指定關(guān)鍵詞的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:
當(dāng)回車(keycode為13)按下時(shí),獲取輸入框(id為findinput)的值,并保存在keyword關(guān)鍵字中,利用filter()對(duì)li進(jìn)行篩選。
將原有內(nèi)容隱藏,篩選出的內(nèi)容進(jìn)行漸變顯示。
$('#findinput').keydown(function(event){ if(event.keyCode == 13){ var keyword = $(this).val() // alert(keyword) $('li').hide()//將原有的內(nèi)容隱藏 //然后將含有keyword的li進(jìn)行漸變顯示 $("p").filter(":Contains("+keyword+")").parents('.todo-ltem').fadeIn(2000) } })
效果如下:
未篩選時(shí):
篩選后:
總結(jié)
以上所述是小編給大家介紹的jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果,實(shí)例分析了animate方法實(shí)現(xiàn)動(dòng)畫(huà)效果的相關(guān)技巧,并備有較為詳盡的注釋供讀者學(xué)習(xí)參考,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jQuery 過(guò)濾方法filter()選擇具有特殊屬性的元素
需要選出所有有背景圖片的元素,使用jQuery的DOM過(guò)濾方法filter(),可以根據(jù)函數(shù)中表達(dá)的任何條件選擇元素,需要的朋友可以參考下2014-06-06JS中Array數(shù)組學(xué)習(xí)的總結(jié)
本文主要介紹了JS中Array數(shù)組的相關(guān)知識(shí)。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值用法實(shí)例
這篇文章主要介紹了jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值的用法,實(shí)例分析了jQuery中attr方法實(shí)現(xiàn)多個(gè)屬性設(shè)置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery通過(guò)擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法
這篇文章主要介紹了jquery通過(guò)擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法,通過(guò)jQuery針對(duì)select空間增加enter及focus選擇功能分析了jQuery擴(kuò)展的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-11-11jQuery插件PageSlide實(shí)現(xiàn)左右側(cè)欄導(dǎo)航菜單
jQuery pageSlide 是一個(gè)可以讓網(wǎng)頁(yè)出現(xiàn)滾動(dòng)效果的jQuery插件,它可以控制一個(gè)隱藏頁(yè)面的顯示和關(guān)閉。具體來(lái)說(shuō),就是當(dāng)前頁(yè)占一個(gè)完整頁(yè)面,隱藏頁(yè)是看不到的,你設(shè)置一個(gè)控制的地方,點(diǎn)擊該控制時(shí)觸發(fā)事件,隱藏的頁(yè)面就滑出來(lái),再次點(diǎn)擊隱藏頁(yè)面以外的地方,它就又關(guān)閉2015-04-04jQuery實(shí)現(xiàn)的仿百度分頁(yè)足跡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿百度分頁(yè)足跡效果代碼,采用jQuery針對(duì)奇偶數(shù)不同的頁(yè)碼設(shè)置不同的樣式,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10