Question

我正在尝试制作一个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`;

        }
    })
});

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

未捕获的ReferenceError：list未定义在HTMLFormElement。（scritp.js：39）

这是第39行：

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

Answer 1

将第39行更改为：

list

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

也

您需要将<form> <input class="search-name" type="text" placeholder="Search club"> </form>事件侦听器添加到实际的文本输入中，而不是添加到表单本身。

{{1}}

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

搜索栏过滤器不起作用

1 个答案: