We can use this small plugin to filter children in a container in realtime with a .is-hidden class.
When there is a keyup event on the searchInput it filters all the children in the container. It looks at all the text in the children aswell as all the alt tags. If there isn't a match with the value from the input the child element will get the .is-hidden class.
| Option | Default | What it does |
|---|---|---|
| container | null | The container containing children |
| searchInput | null | The inputfield for the keyup event |
Just add the script to your HTML, have a container with children/articles/items in it and an input field. Initialize the plugin with the following code:
// Init articleSearch
articleSearch.init({
container: document.getElementById('js-articles'),
searchInput: document.getElementById('js-articles-search'),
});