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

Question

J'aimerais créer un champ de texte avec une liste déroulante permettant à l'utilisateur de choisir des valeurs prédéfinies. L'utilisateur doit également être en mesure de saisir une nouvelle valeur ou de 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 s'il était unifié dans un seul widget.

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

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

Answer 1

La meilleure solution consiste probablement à utiliser une bibliothèque tierce.

Il existe une implémentation de ce que vous recherchez dans interface utilisateur jQuery et dans dojo . jQuery est plus populaire, mais dojo vous permet de définir de manière déclarative des widgets en HTML, ce qui ressemble davantage à ce que vous recherchez.

Le type que vous utiliserez dépendra de votre style, mais les deux sont développés pour un travail inter-navigateur, et les deux seront mis à jour plus souvent que le copier-coller de code.

Answer 2

Vous pouvez y parvenir en utilisant la balise <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 saisi dans le navigateur, une liste avec l'option définie apparaît.

Answer 3

Ceci peut être réalisé à l'aide de HTML simple, CSS et JQuery. J'ai créé un exemple de page:

$(document).ready(function(){
   
    $(".editableBox").change(function(){         
        $(".timeTextBox").val($(".editableBox option:selected").html());
    });
});

.editableBox {
    width: 75px;
    height: 30px;
}

.timeTextBox {
    width: 54px;
    margin-left: -78px;
    height: 25px;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <select class="editableBox">        
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="23">23:00</option>
        <option value="24">24:00</option>
    </select>
    <input class="timeTextBox" name="timebox" maxlength="5"/>
</div>

Answer 4

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

Il est peut-être possible de créer en quelque sorte un menu déroulant permettant l'édition directe, mais l'OMI n'en vaut pas la chandelle. Si c'était le cas, Amazon, Google ou Microsoft le feraient ;-) Il suffit de faire le travail avec la solution la moins compliquée. C’est aussi rapide (votre patron l’aime peut-être) et généralement plus facile à entretenir (vous aimerez peut-être cela).

Answer 5

Implémentation très simple (uniquement des fonctionnalités de base) basée sur CSS et une ligne de code JS

<div class="dropdown">
    <input type="text" />
    <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
        <option>This is option 1</option>
        <option>Option 2</option>
    </select>
</div>

Remarque: il utilise previousElementSibling, qui n'est pas pris en charge dans les anciens navigateurs. (sous IE9)

.dropdown {
    position: relative;
    width: 200px;
}
.dropdown select
{
    width: 100%;
}
.dropdown > * {
    box-sizing: border-box;
    height: 1.5em;
}
.dropdown select {
}
.dropdown input {
    position: absolute;
    width: calc(100% - 20px);
}

La voici JSFiddle

Answer 6

ComboBox avec TextBox (pour les valeurs prédéfinies ainsi que pour les valeurs définies par l'utilisateur.)

ComboBox avec TextBox (cliquez ici)

Answer 7

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

Ce dont vous avez besoin, c’est d’une application qui s’exécute du côté du navigateur pour renvoyer votre formulaire au serveur lorsque celui-ci effectue une sélection - et donc, javascript.

Assurez-vous également que vous avez un autre moyen (par exemple, un bouton d'envoi) pour ceux qui ont désactivé le javascript.

Un bon exemple: Visualiseur de liste déroulante

Hier, j'avais même une boîte à outils plus sophistiquée, avec cette dhtmlxCombo , en utilisant ajax pour récupérer les valeurs pertinentes parmi une grande quantité de données.

Answer 8

Une liste déroulante est malheureusement quelque chose qui a été omis des spécifications HTML.

Malheureusement, la seule façon de le gérer est de lancer le vôtre ou d’en utiliser un déjà construit. Celui-ci est assez simple. J'utilise celui-ci pour une application open source bien que, malheureusement, vous payer pour un usage commercial.

Answer 9

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>