javascript - 当我在下面的代码中输入 jquery 时如何过滤我的复选框？

Question

我想在下面的代码中过滤我的复选框。当我在输入中写入类“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>

Answer 1

In your example .. .search-filter-con element has two label-name not just one .. so the code will return both of them .. $(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>