当我在下面的代码中在jquery中输入内容时，如何过滤列表? [英] how to filter my list when I write in input in jquery in below code?

问题描述

我有一个作业列表，我想对其进行过滤，因此当我用类js-filter-input编写输入时，它只显示与js-filter-input值匹配的li.例如，我想找到一个画家.但是我的代码无法正常工作.我的大多数代码都可以运行，但是试图找到li的这部分.closest( '.result .tests ul .li' ).show();无法正常工作.我该如何解决?

I have a list of jobs and I want to filter it so when I am writing in the input with class js-filter-input it only shows li matching the value of js-filter-input. For example, I want to find a painter. But my code doesn't work correctly. Most of my code works, but this part .closest( '.result .tests ul .li' ).show(); that tries to find li doesn't work correctly. How would I fix it?

<input class="search_box js-filter-input" autocomplete="off" placeholder="search ..." name="search_key" type="text">
<button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button>
   <div class="result">
    <div class="tests">
        <ul>
            <li><a href="#" data-fa="writer" title="">writer</a> </li>
            <li><a href="#" data-fa="painter" title="">painter</a></li>
            <li><a href="#" data-fa="programmer" title="">programmer</a></li>
            <li><a href="#" data-fa="web designer" title="">web designer</a></li>
        </ul>
    </div>
</div>

java脚本:

$(document).on('input', '.js-filter-input', function() {
  var val = $(this).val().trim();

  if (val !== '') {
    $(".mid-row .search-container .result,.search-container2 .result").fadeIn(200);

    $(this).parent().find('.result .tests ul li a').filter(function() {
      var FaData = $(this).data('fa');
      return FaData.indexOf(val) > -1;
    }).closest('.result .tests ul .li').show();
  } else {
    $(".result .tests ul .li").show();
  }
});

推荐答案

您可以使用jQuery过滤器功能尝试类似的操作.

You can try something like this by using the jQuery filter function.

$(document).on('input', '.js-filter-input', function() {
    var inpVal = this.value; 
    var reg = new RegExp(inpVal, "i");
    var selector = $('.tests ul li');
    if(inpVal){
      selector.hide().filter(function(){
        return $(this).find('a').data('fa').match(reg);
      }).show();
    } else {
       selector.show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input class="search_box js-filter-input" autocomplete="off" placeholder="search ..." name="search_key" type="text">
<button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button>
   <div class="result">
    <div class="tests">
        <ul>
            <li><a href="#" data-fa="writer" title="">writer</a> </li>
            <li><a href="#" data-fa="painter" title="">painter</a></li>
            <li><a href="#" data-fa="programmer" title="">programmer</a></li>
            <li><a href="#" data-fa="web designer" title="">web designer</a></li>
        </ul>
    </div>
</div>

这篇关于当我在下面的代码中在jquery中输入内容时，如何过滤列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！