如何用纯JavaScript重写此jQuery搜索过滤器功能？

Question

How could this jQuery search filter function be rewritten in pure JavaScript? 如何用纯JavaScript重写此jQuery搜索过滤器功能？ The function looks at all li elements whose parent ul element has the category class and hides/shows them based on their content matching or not matching the input from a field with the search class. 该函数查看其父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();
  });
});

EDIT: I tried the function below, but it only targets the first element with the name class inside of the li element, and won't work on the li element as a whole. 编辑：我尝试了下面的函数，但它只针对li元素内部具有name类的第一个元素，并且不会对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

I've checked your code as is on a simple html page, and it seems to be ok (at least in Chrome): 我已经在一个简单的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

As I commented on Anton L's answer (thank you again for your help Anton), I was looking for JavaScript that's functionally identical to the jQuery code I provided. 当我评论Anton L的答案（再次感谢您对Anton的帮助）时，我正在寻找功能与我提供的jQuery代码相同的JavaScript。 There weren't many examples of filtering in pure JavaScript, but I did find a lot of examples in jQuery, so I'm posting my solution as an answer here in case someone else finds it helpful. 纯JavaScript过滤的例子并不多，但是我确实在jQuery中找到了很多例子，所以我在这里发布解决方案作为答案，以防其他人觉得有用。

HTML: HTML：

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

JavaScript: 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 个解决方案

解决方案1
1 2014-07-24 00:18:12

解决方案2
0 2014-07-24 00:46:05

如何用纯JavaScript重写此jQuery搜索过滤器功能？

问题描述

2 个解决方案

解决方案1 1 2014-07-24 00:18:12

解决方案2 0 2014-07-24 00:46:05

解决方案1
1 2014-07-24 00:18:12

解决方案2
0 2014-07-24 00:46:05