Hey there, I've been working on creating result suggestions for my search bar. The generation process is all set, but I'm facing an issue with displaying the elements on the HTML page.
During testing, I keep seeing ${resultItem.name}, and when I debug, it seems that the problem lies in the content of the suggestion variable within 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>