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";
}
}
}
});
Comments powered by CComment