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 ❞

1  Jerry Wham le

Cool. Merci pour l'astuce mais il n'y a pas plus simple ?
Normalement, avec le code ci-dessous, tu n'as pas besoin de js. Par contre, il faut appuyer 2 fois sur entrée, une première pour sélectionner le terme souhaité, la deuxième pour envoyer le formulaire :
&lt;form action=""&gt;
&lt;label for="monNavigateur"
&gt;Veuillez choisir un navigateur parmi ceux-ci :&lt;/label
&gt;
&lt;input list="navigateurs" id="monNavigateur" name="monNavigateur" /&gt;
&lt;datalist id="navigateurs"&gt;
&lt;option value="Chrome"&gt;&lt;/option&gt;
&lt;option value="Firefox"&gt;&lt;/option&gt;
&lt;option value="Internet Explorer"&gt;&lt;/option&gt;
&lt;option value="Opera"&gt;&lt;/option&gt;
&lt;option value="Safari"&gt;&lt;/option&gt;
&lt;option value="Microsoft Edge"&gt;&lt;/option&gt;
&lt;/datalist&gt;
&lt;input type="submit" value="ok"&gt;
&lt;/form&gt;


https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist


 
2  Bronco le

AAAARGH !!! Appuyer DEUX FOIS sur entrée ?!



En fait, dans ce cas précis, ça m'allait mieux de ne pas utiliser de formulaire du tout, ni de bouton submit. Puis je me suis dit que l'astuce pouvait être utile dans d'autres cas En plus, comme cette appli est déjà pleine de JS ...


Mais sinon, c'est sûr que moins il y a de Javascript, mieux c'est

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le dernier caractère du mot gy6b3kq ?