¿Cómo puedo crear una lista desplegable editable en HTML?

Question

Me gustaría crear un campo de texto con una lista desplegable que permita al usuario elegir algunos valores predefinidos. El usuario también debe ser capaz de escribir un nuevo valor o seleccionar uno predefinido de una lista desplegable. Sé que puedo usar dos widgets para eso, pero en mi aplicación sería más ergonómico si estuviera unificado en un widget.

¿Hay un widget estándar o tengo que usar un javascript de terceros?

¿Qué hay de la portabilidad del navegador?

Answer 1

La mejor manera de hacerlo es probablemente utilizar una biblioteca de terceros.

Hay una implementación de lo que estás buscando en jQuery UI y en dojo. jQuery es más popular, pero dojo te permite definir widgets de forma declarativa en HTML, que suena más parecido a lo que estás buscando.

El que use dependerá de su estilo, pero ambos se desarrollan para el trabajo de navegador cruzado, y ambos se actualizarán con más frecuencia que copiar y pegar código.

Answer 2

No estoy seguro de que haya una manera de hacerlo automáticamente sin javascript.

Lo que necesita es algo que se ejecuta en el lado del navegador para enviar su formulario de vuelta al servidor cuando el usuario hace una selección, por lo tanto, javascript.

Además, asegúrese de tener un medio alternativo (es decir, un botón de envío) para aquellos que tienen Javascript desactivado.

Un buen ejemplo: Combo-Box Viewer

que tenían incluso un más sofisticado cuadro combinado ayer, con este dhtmlxCombo, usando ajax para recuperar los valores pertinentes entre gran cantidad de datos.

Answer 3

La etiqueta <select> solo permite el uso de entradas predefinidas. La solución típica para su problema es tener una entrada etiquetada 'Otro' y un campo de edición deshabilitado (<input type="text"). Agregue un poco de JavaScript para habilitar el campo de edición solo cuando esté seleccionado 'Otro'.

Puede ser posible de alguna manera crear un menú desplegable que permita la edición directa, pero IMO no vale la pena el esfuerzo. Si lo fuera, Amazon, Google o Microsoft lo harían ;-) Simplemente haga el trabajo con la solución menos complicada. Es más rápido (a su jefe le gusta) y generalmente es más fácil de mantener (es posible que le guste).

Answer 4

Desafortunadamente, un cuadro combinado no se incluyó en las especificaciones HTML.

La única forma de gestionarlo, más bien desafortunadamente, es tirar uno propio o utilizar uno preconstruido. This one parece bastante simple. Uso this one para una aplicación de código abierto, aunque desafortunadamente tiene que pagar por uso comercial.

Answer 5

Puede lograr esto utilizando la etiqueta <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 hace doble clic en el texto de entrada en el navegador, aparecerá una lista con la opción definida.

Answer 6

Un poco de CSS y ya está fiddle

<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 7

ComboBox con cuadro de texto (para valores predefinidos, así como los valores definidos por el usuario.)

ComboBox with TextBox (Click Here)

Answer 8

Implementación muy simple (solo funcionalidad básica) basada en CSS y una línea de código 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> 

Tenga en cuenta: utiliza previousElementSibling que no es compatible in older browsers (below 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); 
} 

Aquí está en JSFiddle

Answer 9

Esto se puede lograr con la ayuda de HTML simple, CSS y JQuery. He creado una página de muestra:

$(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>