Utiliser les datalist pour masquer du contenu dans une page web - javascript

J'avais besoin de cette fonctionnalité pour mon site de promotions. Le but étant de faire disparaître de la page les articles qui ne répondent pas à la recherche au fur et à mesure que l'utilisateur tape sa recherche. Je trouve que la datalist est sympa mais pas assez efficace.

Passons directement au vif du sujet. On positionne, un input de recherche lié à la datalist (j'ai fait un copié collé de mon site de promotions) et bien entendu les articles.

<div class="input-group mb-3"><input list="produits" onchange="allerauproduit(this.value)" placeholder="Recherche dans la page Xiaomi, MI8, Ilife, aspirateur" type="text" class="form-control" aria-label="Rechercher dans la page" aria-describedby="basic-addon2" id="choix_produit">
<div class="input-group-append"><button type="button">Voir le produit</button></div>
<datalist id="produits">
  <option label="mon article 1" value="article1"></option>
 <option label="mon article 2" value="article2"></option>
 <option label="mon article 3" value="article3"></option>
</datalist>

<article id="article1">article 1 </article>
<article id="article2">article 2 </article>
<article id="article3">article 3 </article>

Ensuite un petit JavaScript avec sûrement un peu de JQuery (sous Joomla ça ne pose pas de problème ;) ). On est d'accord, il est moche et assez efficace.

var choix = document.getElementById('choix_produit')
var Value = document.getElementById('produits').options; //on récupère les valeurs dans le datalist
choix.addEventListener("keyup", function(touche) {
  for (var i=0; i< Value.length;i++) { //Malheureusement on doit passer tous les articles
    if (Value[i].label.toLowerCase().indexOf(choix.value.toLowerCase()) !== -1){
      if (document.getElementById(Value[i].value)) {
		  document.getElementById(Value[i].value).style.display="block";
	  } 
    } else {
	  if (document.getElementById(Value[i].value)) {
		document.getElementById(Value[i].value).style.display="none";
	  }
    }
  }
});