javascript - 如何用纯 JavaScript 重写这个 jQuery 搜索过滤功能？

Question

如何用纯 JavaScript 重写这个 jQuery 搜索过滤器函数？该函数查看其父 ul 元素具有类别类的所有 li 元素，并根据其内容与搜索类的字段输入匹配或不匹配来隐藏/显示它们。

$(function(){
  $('.search').keyup(function(){
    var searchText = $(this).val().toLowerCase();
    $allListElements = $('ul.category > li'),
    $matchingListElements = $allListElements.filter(function(i, el){
      return $(el).text().toLowerCase().indexOf(searchText) !== -1;
    });
    $allListElements.hide();
    $matchingListElements.show();
  });
});

编辑:我尝试了下面的函数，但它仅针对 li 元素内具有名称类的第一个元素，并且不适用于整个 li 元素。

var input = document.getElementById('search');
input.onkeyup = function () {
  var filter = input.value.toUpperCase();
  var lis = document.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    var name = lis[i].getElementsByClassName('name')[0].innerHTML;
    if (name.toUpperCase().indexOf(filter) == 0) 
        lis[i].style.display = 'list-item';
    else
        lis[i].style.display = 'none';
  }
}

Answer 1

当我评论 Anton L 的回答时(再次感谢您的帮助 Anton)，我一直在寻找与我提供的 jQuery 代码功能相同的 JavaScript。纯 JavaScript 中的过滤示例并不多，但我确实在 jQuery 中找到了很多示例，因此我将我的解决方案作为答案发布在这里，以防其他人发现它有帮助。

HTML:

<input id="search"/>
<ul class="filter">
  <li>FIlter</li>
  <li>fi2lter</li>
  <li>filter</li>
  <li>filt3er</li>
  <li>filter</li>
</ul>

JavaScript:

document.getElementById('search').addEventListener('keyup', function () {
  var filterText = this.value.toLowerCase(),
  lis = document.querySelectorAll('.filter li'),
  i;
  for (i = 0; i < lis.length; i++) {
    if (filterText === '' || lis[i].innerHTML.toLowerCase().indexOf(filterText) > -1) {
      lis[i].style.display = 'block';
    }
    else {
      lis[i].style.display = 'none';
    }
  }
});