我想在下面的代码中过滤我的复选框。当我使用“ js-filter-input”类编写输入时,我只想显示具有“ js-filter-input”输入值的复选框。例如我在输入中写入uni 1,我只想显示具有unni 1值的复选框,而其他ckeckbox都被隐藏了,但是我的代码无法正常工作。
$( document ).on( 'keyup', '.js-filter-input', function () {
var val;
var $content =$( this ).parent().next().find( ".search-filter-con" ).find( '.label-name' ).text() + " ";
if ( val = $( this ).val() ) {
$( '.group-checkbox .label-name', $content ).each( function () {
var patt = new RegExp( val, 'i' );
if ( patt.test( $( this ).data( 'en' ) ) || patt.test( $( this ).data( 'fa' ) ) || patt.test( $( this ).data( 'search' ) ) ) {
$( this ).parent().show();
} else {
$( this ).parent().hide();
}
} );
} else {
$( '.group-checkbox', $content ).show();
}
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-container2">
<input class="search_box js-filter-input" placeholder="" name="" type="text">
<button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="searchList">
<div class="sampleContainer mCustomScrollbar _mCS_3 mCS-dir-rtl mCS_no_scrollbar">
<div class="mCustomScrollBox mCS-light-thin mCSB_vertical mCSB_inside">
<div class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" dir="rtl">
<div class="search-filter-con">
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni1" name="check" />
<label for="uni1"></label>
</div>
<label class="label-name" for="uni1" data-fa="uni1" data-en="uni1" data-search="uni1>uni1</label>
</div>
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni2" name="check" />
<label for="uni2"></label>
</div>
<label class="label-name" for="uni2" data-fa="uni2" data-en="uni2" data-search="uni2">uni2</label>
</div>
</div>
</div>
</div>
</div>
</div>
在您的示例中.. .search-filter-con元素具有两个label-name,而不仅仅是一个..因此代码将返回它们两个..
$(this).parent().next().find(".search-filter-con").find('.label-name').text()
要获得分隔的文本,您需要使用它.each()
来遍历标签
$(this).parent().next().find(".search-filter-con").find('.label-name').each(function(){
console.log($(this).text() + ',');
});
我不知道使用的目的是什么,$(this).parent().next()
除非您具有相同类的多个输入和div,并且要引用它们中的每一个
要使用input
过滤,您可以使用.filter()
与indexOf()
$(document).on('input', '.js-filter-input', function() {
var val = $(this).val().trim();
if (val !== '') {
$(this).parent().next().find(".group-checkbox").hide().find('.label-name').filter(function(){
var FaData = $(this).data('fa');
var EnData = $(this).data('en');
return FaData.indexOf(val) > -1 || EnData.indexOf(val) > -1;
}).closest('.group-checkbox').show();
}else{
$('.group-checkbox').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-container2">
<input class="search_box js-filter-input" placeholder="" name="" type="text">
<button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="searchList">
<div class="sampleContainer mCustomScrollbar _mCS_3 mCS-dir-rtl mCS_no_scrollbar">
<div class="mCustomScrollBox mCS-light-thin mCSB_vertical mCSB_inside">
<div class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" dir="rtl">
<div class="search-filter-con">
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni1" name="check" />
<label for="uni1"></label>
</div>
<label class="label-name" for="uni1" data-fa="امير كبير" data-en="امير كبير" data-search="uni1">امير كبير</label>
</div>
<div class="group-checkbox">
<div class="squaredFour">
<input type="checkbox" value="None" id="uni2" name="check" />
<label for="uni2"></label>
</div>
<label class="label-name" for="uni2" data-fa="تهران" data-en="تهران" data-search="uni2">تهران</label>
</div>
</div>
</div>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句