jQuery列表檢索功能實現(xiàn)代碼
更新時間：2017年07月17日 09:41:27 作者：裴珞嘉
要實現(xiàn)一個簡單的列表，右上角有一個檢索功能我們要實現(xiàn)的是列表檢索功能，具體實例代碼大家參考下本文
先給大家展示下效果圖：
這是一個簡單的列表 右上角有一個檢索功能 我們要實現(xiàn)的是列表檢索功能 是用的jquery實現(xiàn)的 具體代碼如下
$(function(){
$("input[type=button]").click(function(){
var txt=$("input[type=text]").val();
if($.trim(txt)!=""){
$(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
}else{
$(".ggsm_list li").show();
}
});
});
給按鈕一個點擊事件，首先獲取到input中的值，然后讓span的其它父元素都隱藏(其實就是隱藏掉其它的li標簽)然后查找含有txt(就是input中值)的那一個li，然后顯示出來
$("#textInput").on("keypress", function (e) {
if (e.charCode === 13) {
var txt=$("input[type=text]").val();
if($.trim(txt)!=""){
$(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
}else{
$(".ggsm_list li").show();
}
}
這個代碼是對鍵盤回車鍵做的一個優(yōu)化(代碼不多很簡單)
以上所述是小編給大家介紹的jQuery列表檢索功能實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了Jquery中用canvas標簽繪制驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了jQuery給動態(tài)添加的元素綁定事件的方法,對比了jQuery中事件綁定的方法以及常見版本使用綁定的區(qū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
一個關于jqGrid使用的小例子(行按鈕) ，使用jqGrid的朋友可以參考下。2011-11-11
使用jQuery的live()方法綁定事件，有時會出現(xiàn)重復綁定的情況，如，當點擊一個按鈕時，此按鈕所綁定的事件會并執(zhí)行n遍2011-10-10
jQuery的cookie插件實現(xiàn)保存用戶登陸信息
保存用戶登陸信息的方法有很多，本文為大家介紹的這個方法是通過cookie插件來實現(xiàn),需要的朋友可以參考下2014-04-04
select中所有option選項如何刪除，本文使用jquery簡單實現(xiàn)下，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-08
頁面 Loading 條基本人人都會用。它的原理很簡單：在頁頭放置一個文字或者圖片的 loading 狀態(tài)，然后頁尾載入一段 JS 隱藏掉，即根據(jù)瀏覽器的載入順序來實現(xiàn)的簡易 Loading 狀態(tài)條。2009-02-02
這篇文章主要介紹了jquery插件corner實現(xiàn)圓角邊框的方法,實例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了利用jQuery給表格添加分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了jquery提交form表單示例,需要的朋友可以參考下2014-03-03