过滤搜索 <ul>答案

【问题标题】：Filter search for <ul>过滤搜索 <ul>
【发布时间】：2013-03-13 22:14:21
【问题描述】：

我也有一个用户列表：

<ul>
<li class="thumb selectable arrow light" style="margin-bottom:-5px;"
data-image="http://cdn.tapquo.com/lungo/icon-144.png">
<strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong> 
<small class="description">Hi!</small> 
</li>
...
</ul>

我想要的是每次您写一封信时的文本输入，以仅显示以该字母开头或可能具有该名称的用户。我能做到吗？它是 jquery 但不是...

【问题讨论】：

我真的不明白你想要什么。加上你做了什么？一如既往
据我所知。你有一个用户列表和一个文本输入。当我们开始输入时，您希望匹配的用户出现在某处
我非常困惑。您能否在步骤中指定您想要实现的目标？您是否想要一个具有侦听器并检查插入其中的每个字母是否以字母开头的 input 字段？
所以你说 btevfik，我有一个用户列表和一个输入，只要用户输入一个不包含这些字母的字母就会消失，只保留那些匹配的。
作为这个产品过滤器的例子，无需使用jquerymobile view.jquerymobile.com/1.3.0/docs/widgets/listviews/#list-filter

标签： javascript jquery search html-lists textinput

【解决方案1】：

这是一个 input，它根据纯 JavaScript 中的值过滤 <ul>。它的工作原理是处理onkeyup，然后获取<li>s 并将它们的内部元素.name 与过滤器文本进行比较。

jsFiddle

var input = document.getElementById('input');
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';
    }
}

【讨论】：

应该用display = 'list-item';
请扩展答案以搜索与名字或姓氏匹配的名称。如果搜索匹配任何名称（名字或姓氏），则应显示。在上述情况下，“安德鲁”或“嗨”。
要在单词中的任何位置搜索匹配项，请改用if (name.toUpperCase().indexOf(filter) != -1)。 -1 用于表示不匹配。

【解决方案2】：

所以你在这样的无序列表中有一个列表项的集合。

<div class="some-input-field-class">
   <input type="text" name="filter" id="filter">
   <label for="filter">Filter Names</label>
</div>

<ul class="my-user-collection">
  <li class="thumb selectable arrow light" style="margin-bottom:-5px;"
  data-image="http://cdn.tapquo.com/lungo/icon-144.png">
  <strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong> 
  <small class="description">Hi!</small> 
  </li>
  ...
</ul>

您可以将其添加到您的 javascript 文件中。但是您也需要加载事件侦听器。你可能有一些事件，所以只做你需要做的。也许将它添加到另一个函数中，您可以在其中加载其余的事件侦听器。

// Load the event listener
document.querySelector('#filter').addEventListener('keyup', filterNames);

函数通过定位类来迭代li，迭代数组，因为我们使用querySelectorAll而不是getElementByID。 -1 表示不匹配。

function filterNames(e) {
  const text = e.target.value.toLowerCase();
  document.querySelectorAll('.selectable').forEach(
    function(name) {
      let item = name.firstChild.textContent;
      if (item.toLowerCase().indexOf(text) != -1) {
        name.style.display = 'block';
      } else {
        name.style.display = 'none';
      }
    }
  );
}

【讨论】：