FiltersLesson 151Free preview

Filter List

This lesson is part of How To · All levels

Summary

This lesson shows you how to filter the list of items based on the text that the user typed. Each item is compared to a keyword, then the missing items are hidden. This technique is often used in contact lists, menus, or lists of names and can be implemented with pure JavaScript.

Key points

Take all list items with querySelectorAll and repeat using forEach
Compare keywords in lowercase letters with textContent items
Hide the unsuitable item using style.display = "none"
Display special messages when no items match the search

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.