Question

如何在纯JavaScript中重写这个jQuery搜索过滤器功能？该函数查看其父元素具有类别类的所有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元素中名称为class的第一个元素，并且不会对整个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

我已经在一个简单的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>

Answer 2

当我评论Anton的回答时（再次感谢您对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';
    }
  }
});

如何在纯JavaScript中重写这个jQuery搜索过滤器功能？

2 个答案: