搜索栏过滤器不起作用答案

【问题标题】：searchbar filter doesn't work搜索栏过滤器不起作用
【发布时间】：2018-06-07 14:41:59
【问题描述】：

我正在尝试制作一个 javascript 搜索栏过滤器。我在这里有这 5 个足球俱乐部的名称，我想创建一个搜索栏，这样如果我输入例如“F”，则只有俱乐部：“Feyenoord”可见。

HTML 代码：

<form class="search-name">
<input type="text" placeholder="Search club">
</form>

Javascript 代码：

const $searchBar = document.querySelector(`.search-name`);
$searchBar.addEventListener(`keyup`, function(e){

  const term = e.target.value.toLowerCase();
  const clublists = list.getElementsByClassName(`club-info`);
  Array.from(clublists).forEach(function(clublist){
  const clubname = clublist.firstElementChild.textContent;
  if(clubname.toLowerCase().includes(term) != -1){

    clublist.style.display = `block`;
  } else {
    clublist.style.display = `none`;

        }
    })
});

当我开始在搜索栏中输入时，这是我在控制台中得到的错误：

未捕获的引用错误：list 未定义在 HTMLFormElement。 (scriptp.js:39)

这是第 39 行：

 const $clublists = list.getElementsByClassName(`club-info`);

【问题讨论】：

你在哪里定义list？
@dgig 我正在从“.club-info”类的所有元素中创建一个列表，并将其保存在 const clublists 中
对不起@T.J.Crowder。我不知道。我以后不会再这样做了。问题已解决！

标签： javascript list filter ecmascript-6

【解决方案1】：

将第 39 行更改为：

const clublists = document.getElementsByClassName('club-info');

您永远不会在任何地方定义list - 通常您会定义它并将其设置为使用getElement(s)By... 方法之一的集合。但是在您的情况下，您会遇到错误，因为您还没有这样做。因此，您可以使用文档作为基础来拉出您的列表。

还有

您需要将 keyup 事件侦听器添加到实际的文本输入，而不是表单本身。

<form>
   <input class="search-name" type="text" placeholder="Search club">
</form>

小提琴：https://jsfiddle.net/maubh9z4/13/

【讨论】：

正确 - 仍在播放。你有几个问题。您需要将 keyup 事件侦听器添加到实际的文本输入，而不是表单本身。