Comment créer une dropdownlist modifiable en HTML?
j'aimerais créer un champ texte avec une liste déroulante qui permet à l'utilisateur de choisir des valeurs prédéfinies. L'utilisateur doit également pouvoir taper une nouvelle valeur ou en sélectionner une prédéfinie à partir d'une liste déroulante. Je sais que je peux utiliser deux widgets pour cela, mais dans mon application il serait plus ergonomique si elle était unifiée dans un seul widget.
est-ce qu'il y a un widget standard ou dois-je utiliser un javascript tiers?
et la portabilité du navigateur?
9 réponses
la meilleure façon de le faire est probablement d'utiliser une bibliothèque tierce.
il y a une implémentation de ce que vous recherchez dans jQuery UI et dans dojo . jQuery est plus populaire, mais dojo vous permet de définir déclarativement les widgets en HTML, ce qui ressemble plus à ce que vous recherchez.
que vous utilisez dépendra de votre style, mais les deux sont développés pour le travail de cross browser, et les deux seront mis à jour plus souvent que le code de copier-coller.
vous pouvez accomplir ceci en utilisant la balise <datalist> dans 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 l'entrée de texte dans le navigateur une liste d'options apparaît.
cela peut être réalisé à l'aide de HTML, 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> la balise <select> ne permet l'utilisation que d'entrées prédéfinies. La solution typique à votre problème est d'avoir une entrée étiquetée 'autre' et un champ d'édition désactivé ( <input type="text" ). Ajouter du JavaScript pour activer le champ edit uniquement lorsque' Other ' est sélectionné.
il peut être possible de créer un dropdown qui permet l'édition directe, mais IMO qui n'est pas la peine de l'effort. Si C'était le cas, Amazon, Google ou Microsoft le feraient; -) il suffit de faire le travail avec la solution la moins compliquée. Comme plus rapide (votre patron peut comme ça) et généralement plus facile à maintenir (vous pouvez comme ça).
mise en œuvre très simple (fonctionnalité de base seulement) 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>
s'il vous Plaît note: il utilise previousElementSibling qui n'est pas pris en charge dans les navigateurs plus anciens (ci-dessous 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);
}
ComboBox avec la zone de texte (Pour la Pré-défini les Valeurs ainsi que les Valeurs définies par l'Utilisateur.)
Je ne suis pas sûr qu'il y ait un moyen de le faire automatiquement sans javascript.
ce dont vous avez besoin est quelque chose qui fonctionne du côté du navigateur pour soumettre votre formulaire de retour au serveur quand ils l'utilisateur fait une sélection - donc, javascript.
de plus, assurez-vous d'avoir un autre moyen (c.-à-d. un bouton Soumettre) pour ceux qui ont désactivé javascript.
Un bon exemple: Combo-Box "Visualiseur de 151980920"
j'ai même eu un combo-box plus sophistiqué hier, avec ce dhtmlxCombo , en utilisant ajax pour récupérer des valeurs pertinentes parmi une grande quantité de données.
un combobox est malheureusement quelque chose qui a été omis des spécifications HTML.
La seule façon de le gérer, malheureusement, est de faire rouler votre propre ou utiliser un pré-construit. celui-ci semble assez simple. J'utilise celui-ci pour une application open-source bien que malheureusement vous devez payer pour l'usage commercial.
un peu CSS et vous êtes fait 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>