Comment créer une liste déroulante modifiable en HTML ?

Question

J'aimerais créer un champ de texte avec une liste déroulante qui permet à l'utilisateur de choisir certaines valeurs prédéfinies. L'utilisateur doit également pouvoir taper une nouvelle valeur ou sélectionner une valeur prédéfinie dans une liste déroulante. Je sais que je peux utiliser deux widgets pour cela, mais dans mon application, ce serait plus ergonomique si tout était unifié dans un seul widget.

Existe-t-il un widget standard ou dois-je utiliser un javascript tiers ?

Qu'en est-il de la portabilité du navigateur ?

Answer 1

Vous pouvez y parvenir en utilisant l'option <datalist> en HTML5.

<input type="text" name="product" list="productName"/>
    <datalist id="productName">
        <option value="Pen">Pen</option>
        <option value="Pencil">Pencil</option>
        <option value="Paper">Paper</option>
    </datalist>

Si vous double-cliquez sur le texte à saisir dans le navigateur, une liste des options définies apparaîtra.

Answer 2

Le meilleur moyen d'y parvenir est probablement d'utiliser une bibliothèque tierce.

Il y a une mise en œuvre de ce que vous recherchez dans jQuery UI jQuery UI et en dojo dojo . jQuery est plus populaire, mais dojo vous permet de définir des widgets de manière déclarative en HTML, ce qui ressemble davantage à ce que vous recherchez.

Le choix de l'un ou l'autre dépendra de votre style, mais les deux sont conçus pour fonctionner avec plusieurs navigateurs et seront mis à jour plus souvent que le code copié-collé.

Answer 3

Le site <select> ne permet que l'utilisation d'entrées prédéfinies. La solution typique à votre problème est d'avoir une entrée intitulée "Autre" et un champ d'édition désactivé ( <input type="text" ). Ajoutez du JavaScript pour activer le champ d'édition uniquement lorsque "Autre" est sélectionné.

Il est peut-être possible de créer une liste déroulante permettant une modification directe, mais, selon moi, cela n'en vaut pas la peine. Si c'était le cas, Amazon, Google ou Microsoft le feraient déjà ;-) Il suffit de faire le travail avec la solution la moins compliquée. C'est plus rapide (cela peut plaire à votre patron) et généralement plus facile à maintenir (cela peut vous plaire).

Answer 4

Un peu de CSS et vous avez terminé violon

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

Answer 5

Je ne suis pas sûr qu'il existe un moyen de le faire automatiquement sans javascript.

Ce dont vous avez besoin, c'est de quelque chose qui s'exécute du côté du navigateur pour soumettre votre formulaire au serveur lorsque l'utilisateur fait une sélection - d'où le javascript.

Assurez-vous également de disposer d'un moyen alternatif (par exemple, un bouton d'envoi) pour les personnes qui n'ont pas activé le javascript.

Un bon exemple : Visionneuse de boîtes combinées

J'avais même une boîte combo plus sophistiquée hier, avec ceci dhtmlxCombo en utilisant ajax pour récupérer les valeurs pertinentes parmi une grande quantité de données.