Formulario de selección HTML con opción para ingresar un valor personalizado

104

Me gustaría tener un campo de entrada en el que los usuarios puedan ingresar un valor de texto personalizado o elegir entre el menú desplegable. Un regular <select>solo ofrece opciones desplegables.

¿Cómo puedo <select>aceptar un valor personalizado? Por ejemplo: ¿Ford?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
html forms Ib33X
fuente
Puede usar javascript para agregar dinámicamente una opción a la selección, pero luego usar esta información se convertiría en un verdadero problema.
David
No agregué esa opción para valores personalizados en mi sitio web finnmglas.com/contact, sin embargo, alguien me contactó con un valor personalizado. Eso es tan extraño
finnmglas

Respuestas:

249

HTML5 tiene un cuadro combinado integrado. Creas un texto inputy un datalist. Luego agrega un listatributo al input, con un valor del idde datalist.

Actualización: a partir de marzo de 2019, todos los principales navegadores (que ahora incluyen Safari 12.1 y iOS Safari 12.3) admiten datalistel nivel necesario para esta funcionalidad. Consulte caniuse para obtener información detallada sobre el soporte del navegador.

Se parece a esto:

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

Dmitry
fuente
3
Esta función solo es compatible con aproximadamente el 50% de los navegadores. Solo los últimos Firefox, Chrome y Opera lo admiten; IE, Safari y los navegadores móviles no lo hacen. Ver http://caniuse.com/
markmarijnissen
2
Es la mitad de 2016 (más de 2 años después), y la mayoría de los navegadores aún no son totalmente compatibles con esto, al menos sin errores importantes. Al menos algo funcionará en versiones recientes de casi todo, excepto Safari / Safari iOS, pero debe probar para asegurarse de que sus casos de uso funcionen correctamente. Sigue siendo la mejor respuesta.
Michael Gaskill
1
Me funciona bien. En muchos casos, no es necesario que sea compatible con navegadores antiguos. Solo agregué una imagen de "flecha hacia abajo" en el fondo del campo de entrada para darles a los usuarios una pista de que es expandible. Código (necesita un archivo de imagen real):<input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">
Eugene Kardash
4
Acabo de probar en versiones recientes de IE, Firefox y Chrome y todos funcionan bien. Creo que esta es una gran solución simple a este problema común en muchos casos.
kerl
3
Tenía muchas ganas de usar esto, pero necesitaba establecer un valor predeterminado. El usuario solo ve el valor predeterminado en el menú desplegable frente a todas las opciones (porque están filtradas). Deberían saber borrar el campo de entrada antes de ver todas las opciones.
Justin
26

El último JSFiddle de Alen Saqe no se alteró para mí en Firefox, por lo que pensé en proporcionar una solución alternativa html / javascript simple que funcionará bien dentro de los formularios (con respecto al envío) hasta el día en que la etiqueta de la lista de datos sea aceptada por todos los navegadores / dispositivos. Para obtener más detalles y verlo en acción, vaya a: http://jsfiddle.net/6nq7w/4/ Nota: ¡No permita ningún espacio entre hermanos alternos!

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

mickmackusa
fuente
¡Me gustaría volver a pasar por ese violín! ¡La versión bruja de Firefox no era compatible allí! ¡Lo probé con una versión que no recuerdo! ¡Prestigio!
Alen Saqe
No sé en qué versión de FF estaba. Acabo de echar un vistazo a FF34.0 y ahora estoy obteniendo funcionalidad, así que no se preocupe. Sin embargo, la opción de alternancia predeterminada "Otro" se puede borrar. Cuando elimino "Otro" editando el valor, el menú desplegable no ofrece un valor intuitivo para seleccionar (para acceder a la función de edición). Creo que esto se reduce a preferencias personales. Debido a que la flecha del menú desplegable todavía está presente cuando el campo es editable, es posible que los usuarios no se den cuenta de que el campo es editable. No tener que cavar en ti; solo algunos comentarios. Mi fragmento también considera los nombres de los campos dentro de un <form>.
mickmackusa
El resultado final de este script + html ingenioso pero indescifrable (para mí) es adjuntar el valor de la opción seleccionada, o el texto ingresado, a un GET de la misma página como una cadena de consulta. ¿Alguien sabe cómo convertir la acción en un POST, para que pueda tomar el valor en un archivo php y hacer algo con él allí?
Han
Compuse este script con la intención específica de que se comporte de acuerdo con los envíos de formularios html. ¿Está utilizando el método de publicación como un atributo en la etiqueta del formulario? @Han, si crea un enlace 3v4l.org de su fragmento aislado, puedo echar un vistazo rápido y posiblemente aconsejarlo.
mickmackusa
1
Chico, me siento tonto. Olvidé poner un método en la etiqueta del formulario. Funcionó como se publicó con esta pequeña modificación: <formulario name = "BrowserSurvey" method = "post" action = "/ gotThis.php"> ... Hermoso script, mickmackusa. ¡Gracias por tu sugerencia de seguimiento!
Han
16

¡Solución jQuery!

Demostración: http://jsfiddle.net/69wP6/2/

Otra demostración a continuación (¡actualizada!)

¡Necesitaba algo similar en un caso en el que tenía algunas Opciones fijas y quería que otra opción fuera editable! En este caso, hice una entrada oculta que se superpondría a la opción de selección y sería editable y usé jQuery para que todo funcione sin problemas.

¡Estoy compartiendo el violín con todos ustedes!

HTML

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

CSS

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery 

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

Editar: ¡Se agregaron algunos toques simples en el diseño, para que la gente pueda ver claramente dónde termina la entrada!

JS Fiddle: http://jsfiddle.net/69wP6/4/

Alen Saqe
fuente
11

Realmente no puedes. Tendrá que tener tanto el menú desplegable como el cuadro de texto, y pedirles que elijan o completen el formulario. Sin javascript, podría crear un conjunto de botones de opción separado donde elijan el menú desplegable o la entrada de texto, pero esto me parece complicado. Con algunos javascript, puede desactivar uno u otro dependiendo de cuál elijan, por ejemplo, tener una opción 'otro' en el menú desplegable que activa el campo de texto.

Sam
fuente
9

Si la opción de lista de datos no cumple con sus requisitos, eche un vistazo a la biblioteca Select2 y la " Creación de opciones dinámicas ".

$(".js-example-tags").select2({
  tags: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>
Expandir fragmento

Sogeking
fuente
0

Usando una de las soluciones anteriores (@mickmackusa), hice un prototipo funcional en React 16.8+ usando Hooks.

https://codesandbox.io/s/heuristic-dewdney-0h2y2

Espero que esto ayude a alguien.

dano
fuente
Me siento honrado. Acabo de revisar mis registros y esta fue la publicación número 12 que hice aquí en Stack Overflow, se siente como hace un millón de años.
mickmackusa
Acabo de jugar con su enlace de demostración y parece que ha perdido el efecto de alternar indefinidamente entre los dos tipos de campos.
mickmackusa