如何用纯JavaScript重写这个jQuery搜索过滤函数?

How can this jQuery search filter function be rewritten in pure JavaScript?

本文关键字：搜索 过滤 函数 jQuery 何用纯 JavaScript 重写      更新时间：2023-09-26

如何用纯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';
  }
}

正如我对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';
    }
  }
});

我已经检查了您的代码，就像在一个简单的html页面上一样，它似乎是可以的(至少在Chrome中):

<html>
<body>
<input id="search"/>
<ul class="filter">
    <li><span class="name">filter</span></li>
    <li><span class="name">fi2lter</span></li>
    <li><span class="name">filter</span></li>
    <li><span class="name">filt3er</span></li>
    <li><span class="name">filter</span></li>
</ul>
<script>
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 === '' || getText(lis[i]).toLowerCase().indexOf(filterText) > -1) {
      lis[i].style.display = 'block';
    }
    else {
      lis[i].style.display = 'none';
    }
  }
});
getText = function( elem ) {
    var node,
        ret = "",
        i = 0,
        nodeType = elem.nodeType;
    if ( !nodeType ) {
        // If no nodeType, this is expected to be an array
        while ( (node = elem[i++]) ) {
            // Do not traverse comment nodes
            ret += getText( node );
        }
    } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
        // Use textContent for elements
        // innerText usage removed for consistency of new lines (jQuery #11153)
        if ( typeof elem.textContent === "string" ) {
            return elem.textContent;
        } else {
            // Traverse its children
            for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
                ret += getText( elem );
            }
        }
    } else if ( nodeType === 3 || nodeType === 4 ) {
        return elem.nodeValue;
    }
    // Do not include comment or processing instruction nodes
    return ret;
};
</script>
</body>
</html>
相关文章：