问当我在下面的代码中用jquery写输入时，如何过滤我的列表？
EN

Stack Overflow用户

提问于 2019-06-23 05:03:00

回答 2查看 67关注 0票数 0

我有一个作业列表，我想对它进行过滤，这样当我使用类js-filter-input写入输入时，它只显示与js-filter-input的值匹配的li。例如，我想找一个画家。但是我的代码不能正常工作。我的大部分代码都可以工作，但这部分试图查找li的.closest( '.result .tests ul .li' ).show();不能正常工作。我该怎么解决它呢？

<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();
  }
});

twitter-bootstrap

javascript

jquery

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-23 05:40:51

您可以使用jQuery filter函数来尝试这样的操作。

$(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>

票数 1

Stack Overflow用户

发布于 2019-06-23 05:42:27

$('input[name="key"]').on('input', function (e) {

  !this.value
    ? $('.job').show()
    : $('.job').hide().filter('[data-fa*="' + this.value.toLowerCase() + '"]').show();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="text" name="key" />
</form>

<output>
  <ul>
    <li class="job" data-fa="writer">Writer</li>
    <li class="job" data-fa="painter">Painter</li>
    <li class="job" data-fa="programmer">Programmer</li>
  </ul>
</output>