Скачать или смотреть How To Create A Filterable List With JavaScript

In this tutorial, you'll learn how to create a filterable list in JavaScript.

🚀 Free JavaScript Essentials Course! 👉 https://codewithbubb.gumroad.com/l/ugyud
📖 Free 32-page eBook of JavaScript HowTos 👉 https://bit.ly/2ThXPL3

-- Check out these related videos --
How to load an image (lazy load):    • How To Load An Image With JavaScript [+Laz...  
How to hover with JavaScript:    • How To Hover With JavaScript  
How to detect key presses in JavaScript:    • How To Detect Key Presses In JavaScript  


Note: Thanks very much to Antônio for pointing out that we could equally use a forEach loop instead of a map function on the array (and it's probably preferable as we never return the array from the map function).

A lot of frameworks offer you the ability to dynamically bind an input box to filter the results of a particular list.

In this quick #JavaScriptHowTo you'll learn how to filter a list of li list items based on the input that a user types into an input box thereby creating a filterable list all with Vanilla JavaScript.

We'll first start off by getting the elements of the list and converting them to an array with some simple Vanilla JS functions. Then we'll show how you can use a regular expression to match a string and then hide items in the list by updating it's class list.

Once you can see the mechanics of updating the list, we'll setup an event listener which is triggered when the user types into the input box and we'll use that values to create a filterable list.

This is kinda like a JS search box, enabling users to search for items in a list using a simple bit of Vanilla JS. Channel Handle @codebubb