javascript - jquery 动态过滤器列表

Question

我正在尝试在 keypress 上创建一个过滤器列表。例如，如果我在输入 "It" 中写入，与此输入值不匹配的元素将被隐藏。我不确定我对下面代码的想法是否能完成这项工作。任何提示将不胜感激!

$('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();

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