Question

我试图在keypress上制作过滤器列表。例如，如果我在输入"It"中写入，则隐藏与该输入值不匹配的元素。我不确定我的代码是否符合下面的代码。任何提示都将受到高度赞赏！

＆＃13;

$('ul li ul li').addClass('displayNone');

var geInputValue = $('input').val();
var getInputLength = $('input').length;

function sortDynamically(){
  $('input').on('keypress', function(){
    for(var i=0; i < getInputLength; i++){
      if(getInputValue === $('li').text){
        // remove everything that doesnt match input value
        $('li').siblings().addClass('displayNone');
      }
      else{
        $('li').siblings().removeClass('displayNone');
  });
}
    
sortDynamically();

＆＃13;

ul, li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.displayNone{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<ul class="list">
  <li>Item</li>
  <li>Product
    <ul>
      <li>Bike</li>
    </ul>
   </li>
  <li>About</li>
 </ul>

＆＃13;

Answer 1

此代码根据您输入的内容进行过滤。如果文本输入中没有任何内容，则显示所有内容。

$('input').on('keypress keyup', function(){
    var value = $(this).val().toLowerCase();
    if (value != '') {
  
      $('.list > li').each(function () {
        if ($(this).text().toLowerCase().indexOf(value) > -1) {
          $(this).removeClass('displayNone');  
        } else {
          $(this).addClass('displayNone');
        }
      });
    } else {
      $('.list > li').removeClass('displayNone');
    }
});

ul, li{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.displayNone{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<ul class="list">
  <li>Item</li>
  <li>Product
    <ul>
      <li>Bike</li>
    </ul>
   </li>
  <li>About</li>
 </ul>

Answer 2

jQuery提供了filter和javascript实现toLowerCase()和includes()方法，可用于改进代码

<body>
    <style>
        .displayNone
        {
            display: none;
        }
    </style>
    <input type="text" id="input-filter"/>
    <ul class="list">
        <li>Item</li>
        <li>Product
            <ul>
                <li>Bike</li>
            </ul>
        </li>
        <li>About</li>
    </ul>
    <script>
        var items = $('ul.list li');
        $('#input-filter').on('input', function ($event)
        {
            items.addClass('displayNone').filter(function (item)
            {
                return $(this).text().toLowerCase().includes($($event.target).val().toLowerCase());
            }).removeClass('displayNone');
        });
    </script>
</body>

jquery动态过滤列表

2 个答案: