时间戳

首页 > 解决方案 > 搜索栏过滤器不起作用

javascript - 搜索栏过滤器不起作用

问题描述

我正在尝试制作一个 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 中定义。(脚本.js:39)

这是第 39 行：

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

标签： javascriptlistfilterecmascript-6

解决方案

将第 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/

推荐阅读