¿Escriba manualmente un valor en una lista HTML "Seleccionar"/desplegable?

Question

En una aplicación de Windows Forms, una lista de selección desplegable también da al usuario la opción de escribir un valor alternativo en ese mismo campo (suponiendo que el desarrollador ha dejado esta opción habilitada en el control.)

¿Cómo uno lograr esto en HTML? Parece que solo es posible seleccionar valores de la lista.

Si no es posible hacerlo con HTML directo, ¿hay alguna manera de hacerlo con Javascript?

Answer 1

ExtJS tiene un control ComboBox que puede hacer esto (y toda una serie de otras cosas interesantes !!)

EDIT: Examinar todos los controles, etc, aquí: http://www.sencha.com/products/js/

Answer 2

La forma más sencilla de hacerlo es para usar jQuery: jQuery UI combobox/autocomplete

Answer 3

Telerik también tiene un control de cuadro combinado. Básicamente, se trata de un cuadro de texto con imágenes que al hacer clic sobre ellas revela un panel con una lista de opciones predefinidas.

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

Pero esto es AJAX, por lo que puede tener una huella más grande de lo que desea en su página web (ya que se dice que es "HTML").

Answer 4

Otra solución común es agregar la opción "Otro .." a la lista desplegable y cuando se selecciona mostrar el cuadro de texto que de lo contrario está oculto. Luego, al enviar el formulario, asigne el valor del campo oculto con el valor desplegable o el valor del cuadro de texto y, en el código del lado del servidor, verifique el valor oculto.

Ejemplo: http://jsfiddle.net/c258Q/

código 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; 
} 

Y en el lado del servidor, leer el valor de "fruto" de la Solicitud.

Answer 5

Me encanta la respuesta de Shadow Wizard, que por cierto responde a la pregunta bastante bien. Mi jQuery giro en esto que uso está aquí. http://jsfiddle.net/UJAe4/

Después de escribir un nuevo valor, el formulario está listo para enviarse, solo necesita manejar nuevos valores en el back-end.

jQuery es:

(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)); 

Así se aplica esto al siguiente 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> 

Al igual que este:

$(function() { 

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

}); 

Answer 6

Cualquiera que busque una solución fácil jQuery sin tener para implementar toda esa locura en el sitio de autocompletar de jQuery UI, consulte aquí:

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

Este tipo básicamente creado una extensión para la configuración del cuadro combinado utilizado en el ejemplo jQuery UI. Él también lo expandió un poco.

a llamarlo con:

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

Answer 7

que se enfrentó al mismo problema fundamental: tratar de combinar la funcionalidad de un cuadro de texto y un cuadro de selección que son fundamentalmente diferentes cosas en la especificación HTML.

La buena noticia es que selectize.js hace exactamente esto:

Selectize es el híbrido de un cuadro de texto y la caja. Está basado en jQuery y es útil para etiquetar, listas de contactos, selectores de países, etc.

Answer 8

Se puede hacer ahora con HTML5

ver este post aquí 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>