[Résolu] Liste ouverte

Bonjour à tous
N'ayant que peu besoin de formulaires dans les forum que je gère, je me rends compte que beaucoup de choses ont changé dans ce domaine avec HTML5, j'ai besoin de me documenter dans ce domaine.
Dans le formulaire ancien que j'essaie de mettre au goût du jour, j'ai déjà simplifié pas mal mon code en utilisant <input type="date">, plus besoin du code qui permettait par anticipation de faire ce que font tous (?) les navigateurs.
Mon code étant antérieur à l'arrivée de <datalist> il utilisait <select>.
Pour autant que je comprenne la différence, elle consiste à faciliter la saisie en réduisant la liste pour correspondre à ce qu'on a déjà tapé.
Ma liste comprenant 4 entrées, ce n'est pas d'un intérêt majeur.
Par contre je me demande s'il existe un moyen simple pour représenter une "liste ouverte", c'est à dire qu'on peu choisir une option dans la liste, mais également entrer manuellement une valeur différente.
Dans mon code actuel, il y a une <option value="other">autre</option> et du code qui trappe les changements et ouvre une <input type="text"> pour entrer la valeur "étrangère".
Connaissez vous un moyen plus simple de faire cela?
Modifié par PapyJP (19 Mar 2020 - 14:01)

Bonjour,

Tu peux éventuellement proposer un bon vieux prompt pour mettre à jour une option libre :

exemple avec un select :

<select id="choisis" onchange="updateMyOption()">
    <option value="a">un option redondante</option>
    <option value="b">Une autre recurrente</option>
    <option value="">une en choix libre</option>
</select>

et le js qui va avec :

 function updateMyOption() {
    var selectBox = document.getElementById("choisis");
    var selectOption  = selectBox.options[selectBox.selectedIndex];
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    if (selectedValue =="") {
     event = window.prompt("J'écris mon choix");
     selectOption.setAttribute("value",event);
     selectOption.textContent=event;
    }
   }

Le codepen qui vas avec https://codepen.io/gc-nomade/pen/eYNjpvR pour tester dans vos navigateurs
Modifié par gcyrillus (20 Mar 2020 - 22:36)

Merci pour ta réponse (qui est meilleure que mon ancien code). Je vois que rien n’a changé dans ce domaine. C’est un peu étonnant car ce genre de « liste ouverte » est courant dans les panoplies d’interfaces.
Modifié par PapyJP (19 Mar 2020 - 15:53)

Cela me semblait le plus ergonomique, c'est pourquoi je t'ai proposé cette idée sur cette vielle méthode.

Tu peux, si tu le préfère, créer une boite modale de toute pièce avec un look plus avenant

Bonne continuation.
Modifié par gcyrillus (20 Mar 2020 - 22:36)

J'avais simplement ajouté un <input type="text"> qui vient se superposé à <select> si on choisit "autre".

Bonjour,
quelques fautes très visibles. J'espère que vous ne me tiendrez pas rigueur pour la correction.
"c'est à dire qu'on peu choisir une option dans la liste" "peut".
"Tu peut éventuellement proposer un bon vieux prompt" "peux".
"Tu peut, si tu le préfère," "peux".
"un <input type="text"> qui vient se superposé" "superposer".
Bon, pas de reproches, une faute de frappe arrive souvent. C'est juste un signalement pour des fautes qui sont plutôt de conjugaison.

Je reviens sur le sujet : contrairement à ce que je croyais avoir compris, <datalist> permet bien de traiter des "listes ouvertes" (combobox dans le vocabulaire Microsoft). Le problème est que c’est traité différemment selon les navigateurs ce qui n’est pas très pratique. Dans la plupart des documents que j’aI trouvé le point important est que ça permet une autocompletion de la saisie. Le fait qu’on puisse également entrer une valeur qui n’est pas dans la liste n’est pas mentionné.