Solution 1 :

you can map through each child and find out if it contain the search query or not
and do what ever you want like i changed the background color

const q = "Glutamate";
const col = document.querySelector('.col');

// Array.from(col.children) this method will produce an iterable array you can map through each child

Array.from(col.children).map(child =>{
         
          
          //hiding all others 
          if(child.querySelector('h1').innerText.indexOf(q) === -1){
            
            child.style.display = "none";
          }else{
            // do what ever you want
            child.style.display = "block";
            
            // iam changing the background color to yellow
            child.style.backgroundColor = "#ffff00";
            
          }
          
          
        })
<div class="col">
  <div class="row-1">
    <h1>Disodium/Sodium Cocoyl Glutamate</h1>
  </div>
  
  <div class="row-2">
    <h1>Cetearyl Glucoside – Zuckeremulgator</h1>
  </div>
  
  <div class="row-3">
    <h1>Chamomilla Recutita (Matricaria) Flower Extract – Kamille Extrakt</h1>
  </div>
  
  <div class="row-4">
    <h1>Citral – Bestandteil von Zitronengrasöl</h1>
  </div>
</div>

Problem :

I have a page with several divs and each div contain an h1 with a specific text on it, what i’m trying to do is to add an input field and based on the text the user will type on that input field all the rows will disapear except the ones that match the search query (the search should be able to select the parent divs even if the query is not 100% match the h1 string.

This is an examle for the code so if somone type “Disodium” or “Glutamate” it should select “row-1”.

<div class="col">
  <div class="row-1">
    <h1>Disodium/Sodium Cocoyl Glutamate</h1>
  </div>
  
  <div class="row-2">
    <h1>Cetearyl Glucoside – Zuckeremulgator</h1>
  </div>
  
  <div class="row-3">
    <h1>Chamomilla Recutita (Matricaria) Flower Extract – Kamille Extrakt</h1>
  </div>
  
  <div class="row-4">
    <h1>Citral – Bestandteil von Zitronengrasöl</h1>
  </div>
</div>

Comments

Comment posted by PeterKA

Welcome to SO! Hope you like it here. First you say,

Comment posted by Yuki

Thanks so much, this exactly answers my question

By

Leave a Reply

Your email address will not be published. Required fields are marked *