SQLTerminal.app
now available

XPath.app
now available
Want fresh tech tips in your inbox?

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

<input type="text" onkeyup="filter(this)"/>

<div class="row">apple</div>
<div class="row">banana</div>
<div class="row">carrot</div>

<script>
function filter(e){
    search = e.value.toLowerCase();
    console.log(e.value)
    document.querySelectorAll('.row').forEach(function(row){
        text = row.innerText.toLowerCase();
        if(text.match(search)){
            row.style.display="block"
        } else {
            row.style.display="none"
        }
    })
}
</script>

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

Tagged w/ #javascript #html #vanilla #js

Apps I've Built

XPath Expression Editor
Practice and improve your XPath skills with XPath Editor
Click to buy on the App Store
Photo Location Changer
Easily change the location on your photos and videos
Click here for more info about the app
Photo Date Changer
Easily change the dates and times on your photos and videos
Click here for more info about the app
VocabReminder
English dictionary with notifications so you won't forget what you're studying!
Click here for more info about the app
VocabQuiz
The app that quizzes and scores you on your vocabulary!
Click here for more info about the app