如何只显示复选框列表中的搜索文本值



我有一个复选框列表,其中显示了数据库中的值。如果用户搜索复选框标签文本,则搜索到的字符串文本将显示复选框。我在jsfiddle链接中尝试过。无法获取匹配的字符串。https://jsfiddle.net/bd7anjqc/1/

$(document).ready(function() {
$(".List_wrapper").keyup(function() {
_this = this;
// Show only matching TR, hide rest of them
$.each($('#List_wrapper  >input[type="checkbox"]'), function() {
if ($(this).val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
});
$(document).ready(()=> {
$("#search").keyup(()=> {
$.each($('input[type="checkbox"]'), (key,value)=> {
if($(value).parent().text().toLowerCase().includes 
($("#search").val().toLowerCase())){
$(value).parent().show()
}else{ 
$(value).parent().hide();
}    
});
})
})

我希望它能帮助你

检查小提琴:https://jsfiddle.net/h3cy4f6p/

$(document).ready(function() {
$("#search").keyup(function() {
var to_search = $("#search").val().toLowerCase();

$.each($('div.List_wrapper input[type="checkbox"]'), function() {            
var label = $(this).parent('label').text().toLowerCase().trim();

const string = '^' + to_search;
const regexp = new RegExp(string, 'i');
if (regexp.test(label)) {
$(this).parent('label').show();
} else {
$(this).parent('label').hide();
}
});
});
});

搜索使用regexp

最新更新