· 1 min read

How to Filter or Search HTML with Vanilla Javascript - No JQuery Required

The basic approach is to use the document.querySelectorAll to match certain elements, then manually set the display property to 'none' or 'block' (or 'inline-block') to hide or show it. Using the match method allows us to detect whether or not the search term is contained in the element's innerText attribute. Here is the code

apple

banana

carrot Here is a Data URL to see a working example of the approach.

2 comments

  • Darkruse

    Thank you so much, The code is wonderfull, it is light and working.

  • arya721

    My favorite solution I found for this on the internet. Thanks!

Leave a comment