ASTUCE Html & JS : détecter quand on sélectionne un élément d'une datalist
En bossant sur l'appli que j'utilise pour mes cours, j'ai voulu ajouter un accès rapide à un document en tapant le début du nom de dossier dans un input alimenté par une datalist
.
Bien entendu, je veux éviter de devoir passer du clavier à la souris plusieurs fois : tape un bout du nom, clique pour sélectionner, appuie sur entrée pour valider...
Donc, il faudrait que la sélection et l'ouverture du document se fasse:
- quand je tape un bout de nom et que j'appuie sur entrée (il ira chercher le premier de la liste)
- quand je tape le début, que j'utilise les flèches pour aller chercher celui que je veux et que j'appuie sur entrée,
- quand je tape le début et que je clique sur le nom du document qui m'intéresse.
Et là, c'est le drame
En effet, autant on peut capturer un évènement sur un input, autant ce n'est pas possible sur les option
ou le datalist
Donc, il faut gruger et agissant sur les events de l'input.
Je mets ici ma solution actuelle (c'est le code que j'utilise avec mon framework js perso parce que j'ai la flemme de changer ):
<input type="text" placeholder="accès rapide à un document" list="docs_list" id="input_docs_list">
<datalist id="docs_list">
\\ici les option qui vont bien
</datalist>
<script type="text/javascript">
on('keydown','#input_docs_list',function(e){ // ça, c'est mon VanillaJS
if(e.keyCode==13||!e.key){
// si on a appuyé sur entrée ou que l'évènement n'est pas déclenché par une touche (donc, c'est la souris)
window.location.replace("?"+e.target.value);
}
});
on('input','#input_docs_list',function(e){
// celui-ci est pour firefox
if(e.inputType=='insertReplacementText'){
window.location.replace("?"+e.data);
}
})
</script>
J'ai testé sous Firefox, Chromium et Edge...
❝ 2 commentaires ❞
Fil RSS des commentaires de cet article
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...