Saisissez manuellement une valeur dans une liste HTML "Select"/Drop-down?

Question

Dans une application Windows Forms, une liste déroulante de sélecteurs permet également à l'utilisateur de saisir une autre valeur dans le même champ (en supposant que le développeur a laissé cette option activée sur le contrôle)

accomplir ceci en HTML? Il semble que seules les valeurs de la liste peuvent être sélectionnées.

Si ce n'est pas possible avec HTML, y a-t-il un moyen de le faire avec Javascript?

Answer 1

ExtJS a un contrôle ComboBox qui peut le faire (et une foule d'autres choses cool !!)

EDIT: Parcourir tous les contrôles etc, ici: http://www.sencha.com/products/js/

Answer 2

La meilleure façon de le faire est pour utiliser jQuery: jQuery UI combobox/autocomplete

Answer 3

Telerik dispose également d'un contrôle de zone de liste déroulante. Essentiellement, c'est une zone de texte avec des images qui, lorsque vous cliquez dessus, révèlent un panneau avec une liste d'options prédéfinies.

http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

Mais c'est AJAX, donc il peut avoir une plus grande empreinte que vous voulez sur votre site (puisque vous dites qu'il est « HTML »).

Answer 4

Une autre solution courante consiste à ajouter l'option "Autre .." à la liste déroulante et, lorsqu'elle est sélectionnée, afficher la zone de texte qui est cachée. Ensuite, lors de l'envoi du formulaire, attribuez la valeur du champ caché avec la valeur déroulante ou la zone de texte et, dans le code côté serveur, vérifiez la valeur cachée.

Exemple: http://jsfiddle.net/c258Q/

code HTML:

Please select: <form onsubmit="FormSubmit(this);"> 
<input type="hidden" name="fruit" /> 
<select name="fruit_ddl" onchange="DropDownChanged(this);"> 
    <option value="apple">Apple</option> 
    <option value="orange">Apricot </option> 
    <option value="melon">Peach</option> 
    <option value="">Other..</option> 
</select> <input type="text" name="fruit_txt" style="display: none;" /> 
<button type="submit">Submit</button> 
</form> 

JavaScript:

function DropDownChanged(oDDL) { 
    var oTextbox = oDDL.form.elements["fruit_txt"]; 
    if (oTextbox) { 
     oTextbox.style.display = (oDDL.value == "") ? "" : "none"; 
     if (oDDL.value == "") 
      oTextbox.focus(); 
    } 
} 

function FormSubmit(oForm) { 
    var oHidden = oForm.elements["fruit"]; 
    var oDDL = oForm.elements["fruit_ddl"]; 
    var oTextbox = oForm.elements["fruit_txt"]; 
    if (oHidden && oDDL && oTextbox) 
     oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value; 
} 

Et du côté du serveur, lisez la valeur de "fruit" de la demande.

Answer 5

J'adore la réponse de l'Assistant Ombre, qui répond à la question de manière très agréable. Ma torsion jQuery sur ce que j'utilise est ici. Après avoir tapé une nouvelle valeur, le formulaire est prêt à être envoyé, il suffit de gérer de nouvelles valeurs sur l'extrémité arrière.

jQuery est:

(function ($) 
{ 
$.fn.otherize = function (option_text, texts_placeholder_text) { 
    oSel = $(this); 
    option_id = oSel.attr('id') + '_other'; 
    textbox_id = option_id + "_tb"; 

    this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>"); 
    this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>"); 
    this.change(

    function() { 
     oTbox = oSel.parent().children('#' + textbox_id); 
     oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide(); 
    }); 

    $("#" + textbox_id).change(

    function() { 
     $("#" + option_id).val($("#" + textbox_id).val()); 
    }); 
}; 
}(jQuery)); 

Vous appliquer à la ci-dessous html:

<form> 
    <select id="otherize_me"> 
     <option value=1>option 1</option> 
     <option value=2>option 2</option> 
     <option value=3>option 3</option> 
    </select> 
</form> 

comme ceci:

$(function() { 

    $("#otherize_me").otherize("other..", "put new option vallue here"); 

}); 

Answer 6

Tous ceux qui cherchent une solution jQuery facile sans avoir pour mettre en œuvre toute cette folie sur le site de saisie semi-automatique jQuery UI, voir ici:

http://www.benknowscode.com/2013/03/finishing-jquery-ui-autocomplete_4743.html

Ce gars essentiellement créé une extension pour la configuration de combobox utilisé dans l'exemple jQuery UI. Il a également élargi un peu.

Il suffit d'appeler avec:

$('.your-select-element').combobox(); 

Answer 7

J'ai fait face au même problème de base: essayer de combiner les fonctionnalités d'une zone de texte et une boîte de sélection qui sont fondamentalement différentes choses dans la spécification HTML.

Les bonnes nouvelles sont que selectize.js fait exactement ceci:

Selectize est l'hybride d'une zone de texte et la boîte. Il est basé sur jQuery et est utile pour le marquage, les listes de contacts, les sélecteurs de pays, etc.

Answer 8

Il peut être fait maintenant avec HTML5

Voir ce post ici HTML select form with option to enter custom value

<input type="text" list="cars" /> 
<datalist id="cars"> 
    <option>Volvo</option> 
    <option>Saab</option> 
    <option>Mercedes</option> 
    <option>Audi</option> 
</datalist>