How to make a search and filter using javascript

Question

So I am trying to make a Photo filter search. I am able to get to the keyup function but then get stuck on how to search and select the paragraph text. I can not alter the HTML and can only add Javascript.

And what I have so far in my Javascript

window.addEventListener('load', function(e) {

  const query = document.querySelector('#filter');

  let images = document.querySelector('.thumb-display');


    query.addEventListener('keyup', function(e) {
        let search = query.value;


         for (var i = 0; i < images.length; i++) {
            let searchVal = images[i].getElementByTagName('p')[0].innerHTML;

            if (searchVal.indexOf(search) > -1) {
                images[i].display = "";

            } else {
                images[i].display = "none";
            };
        }; 

    });


  })// NO CODE OUTSIDE OF HERE

I want to be able to search the (for example) #oceanbeach #mountainroad

text and have the images that don't go with the search to be hidden but I can't get it to work.

Answer 1

You can use the input event for the textbox and loop through the p tags to show/hide the .thumb-display .

 const txtFilter = document.getElementById('filter'); const lnkReset = document.querySelector('.reset'); const thumbnails = document.querySelectorAll('.thumb-display'); const tagContainers = document.querySelectorAll('.tags'); txtFilter.addEventListener('input', e => { const filter = e.target.value; if (filter === '') { resetFilter(); } else { // Show the reset link/button. lnkReset.classList.remove('hidden'); tagContainers.forEach(tagContainer => { const thumbnail = tagContainer.closest('.thumb-display'); const tags = tagContainer.innerText; if (tags.indexOf(filter) >= 0) { thumbnail.classList.remove('hidden'); } else { thumbnail.classList.add('hidden'); } }); } }); lnkReset.addEventListener('click', e => { e.preventDefault(); resetFilter(); }); function resetFilter() { thumbnails.forEach(thumbnail => thumbnail.classList.remove('hidden')); lnkReset.classList.add('hidden'); txtFilter.value = ''; }

 body { font: normal 14px/1.4 sans-serif; } img { background: #eee; display: inline-block; height: 100px; width: 100px; }.hidden { display: none; }

 <nav> <ul> <li> <a href="#">Home</a> </li> </ul> <form class="frm-filter"> <div class="frm-group"> <a class="reset hidden" href="#">Reset</a> <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" /> </div> </form> </nav> <section class="gallery"> <div class="row"> <h1>Gallery</h1> </div> <div class="row"> <div class="thumb-display"> <img /> <p class="tags">#africa #mountain #road</p> </div> <div class="thumb-display"> <img /> <p class="tags">#palmbeach #distantpeaks</p> </div> <div class="thumb-display"> <img /> <p class="tags">#oceanbeach #mountainroad</p> </div> <div class="thumb-display"> <img /> <p class="tags">#lake #clearskies #onthewater</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #bridgecrossing #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #slowdown</p> </div> <div class="thumb-display"> <img /> <p class="tags">#falltrees</p> </div> <div class="thumb-display"> <img /> <p class="tags">#ontheroad #falldriving</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainflowers #clouds #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainlake #retreat</p> </div> <div class="thumb-display"> <img /> <p class="tags">#stormcoming #thepeak</p> </div> <div class="thumb-display"> <img /> <p class="tags">#perfectbeach #whitesand</p> </div> </div> </section>

Note that this just checks for the value of the innerText of the p tag.

Answer 2

let images = document.querySelector('.thumb-display'); 

I think you're looking for .querySelectorAll() . This would be a good place to start:

let images = [ ...document.querySelectorAll('.thumb-display') ];

Answer 3

To select all elements .thumb-display you have to use Document.querySelectorAll()

• document.querySelectorAll('.thumb-display')

And then you can do:

 const query = document.querySelector('#filter') const reset = document.querySelector('.reset') const thumbs = document.querySelectorAll('.thumb-display') query.addEventListener('keyup', () => thumbs.forEach(t => { const p = t.querySelector('p') t.style.display = p.innerText.includes(query.value)? '': 'none' })) reset.addEventListener('click', (e) => { e.preventDefault() query.value = '' thumbs.forEach(t => t.style.display = '') })

 img { background: grey; height: 20px; width: 60px; }

 <div class="wrapper"> <nav> <form class="frm-filter"> <div class="frm-group"> <a class="reset hidden" href="#">Reset</a> <input class="form-control" type="text" id="filter" name="filter" placeholder="tag filter" /> </div> </form> </nav> <section class="gallery"> <div class="row"> <h1>Gallery</h1> </div> <div class="row"> <div class="thumb-display"> <img /> <p class="tags">#africa #mountain #road</p> </div> <div class="thumb-display"> <img /> <p class="tags">#palmbeach #distantpeaks</p> </div> <div class="thumb-display"> <img /> <p class="tags">#oceanbeach #mountainroad</p> </div> <div class="thumb-display"> <img /> <p class="tags">#lake #clearskies #onthewater</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #bridgecrossing #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #slowdown</p> </div> <div class="thumb-display"> <img /> <p class="tags">#falltrees</p> </div> <div class="thumb-display"> <img /> <p class="tags">#ontheroad #falldriving</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainflowers #clouds #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainlake #retreat</p> </div> <div class="thumb-display"> <img /> <p class="tags">#stormcoming #thepeak</p> </div> <div class="thumb-display"> <img /> <p class="tags">#perfectbeach #whitesand</p> </div> </div> </section> </div>