display of suggestion elements on the search bar using (javaScript)

December 14, 2022

Hi I created a result suggestion on my search bar, everything works on the suggestion generation process, but I can’t display the elements obtained on the html page.

when testing the code, it shows me ${resultItem.name}
when debugging the error is on the content of the suggestion variable in the forEach loop.

const articles = [{ name: 'toto' }, { name: 'mamam' }, { name: 'tampon' }, { name: 'TANTON' }];

const rechercheInput = document.getElementById('rechercheInput');
rechercheInput.addEventListener('keyup', function() {
  const input = rechercheInput.value;
  const result = articles.filter(item => item.name.toLocaleLowerCase().includes(input.toLocaleLowerCase()));
  let suggestion = '';
  result.forEach(resultItem =>
    suggestion += '<div class="suggestion">${resultItem.name}</div>'
  )
  document.getElementById('suggestions').innerHTML = suggestion;
})

<form method="get" action="">
  <input type="search" name="recherche" placeholder="product.." id="rechercheInput" required>
  <button class="btn waves-effect waves-light" type="submit">Recherche
            <i class="material-icons right">search</i>
          </button>
  <div id="suggestions"></div>
</form>

>Solution :

You can use template strings instead of single quotes when appending the element to the suggestion key

The change is here

suggestion +=`<div class="suggestion">${resultItem.name}</div>`

const articles = [
{name:'toto'},
{name:'mamam'},
{name:'tampon'},
{name:'TANTON'}
];

const rechercheInput=document.getElementById('rechercheInput');
rechercheInput.addEventListener('keyup',function(){
const input = rechercheInput.value;
const result = 
articles.filter(item=>item.name.toLocaleLowerCase().includes(input.toLocaleLowerCase()));
let suggestion ='';

result.forEach(resultItem =>
    suggestion +=`<div class="suggestion">${resultItem.name}</div>`
    )
document.getElementById('suggestions').innerHTML=suggestion;
})

   <form method="get" action="">
        <input type="search" name="recherche" placeholder="product.." id="rechercheInput" 
        required>
        <button class="btn waves-effect waves-light" type="submit">Recherche
        <i class="material-icons right">search</i>
      </button>
      <div id="suggestions"></div>
    </form>