фильтр панели поиска не работает

Question

Я пытаюсь сделать фильтр поиска на JavaScript.У меня есть эти 5 названий футбольных клубов, и я хочу создать панель поиска, чтобы, если я наберу, например, «F», был виден только клуб: «Фейеноорд».

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`;

        }
    })
});

Когда я начинаю вводить в строке поиска, я получаю сообщение об ошибке в консоли:

Uncaught ReferenceError: list не определено в HTMLFormElement.(scritp.js: 39)

Это строка 39:

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

Answer 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/