Formulario HTML: Seleccionar-Opción vs Datalista-Opción

Me preguntaba cuáles son las diferencias entre Select-Option y Datalist-Option. ¿Hay alguna situación en la que sería mejor usar uno u otro? Un ejemplo de cada uno sigue:

Seleccionar opción

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Opción datalista

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Piense en ello como la diferencia entre un requisito y una sugerencia. Para elselect elemento, el usuario debe seleccionar una de las opciones que ha dado. Para el datalistelemento, se sugiere que el usuario seleccione una de las opciones que ha dado, pero en realidad puede ingresar lo que quiera en la entrada.

Edición 1: Entonces, cuál usa depende de sus requisitos. Si el usuario debe ingresar una de sus opciones, use elselect elemento Si el uso puede ingresar lo que sea, use el datalistelemento.

Edición 2: Encontré este dato en el Estándar de Vida HTML : "Cada elemento de opción que es un descendiente del elemento datalista ... representa una sugerencia".

Desde un punto de vista técnico, son completamente diferentes. <datalist>es un contenedor abstracto de opciones para otros elementos. En su caso, lo ha usado, <input type="text"pero también puede usarlo con rangos, colores, fechas, etc. http://demo.agektmr.com/datalist/

Si lo usa con entrada de texto, como un tipo de autocompletado, entonces la pregunta realmente es: ¿Es mejor usar una entrada de texto de forma libre o una lista predeterminada de opciones? En ese caso, creo que la respuesta es un poco más obvia.

Si nos centramos en el uso de <datalist> una lista de opciones para un campo de texto, aquí hay algunas diferencias específicas entre eso y un cuadro de selección:

• Un <datalist>cuadro de texto alimentado tiene una sola cadena tanto para mostrar la etiqueta como para enviar. Un cuadro de selección puede tener un valor de envío diferente frente a la etiqueta de visualización<option value='ie'>Internet Explorer</option> .
• Un <datalist>cuadro de texto alimentado no es compatible con<optgroup> etiqueta para organizar la visualización.
• No puede restringir a un usuario a la lista de opciones <datalist>como puede hacerlo con un<select> .
• El evento onchange funciona de manera diferente. En un <select>elemento, el evento onchange se activa inmediatamente al cambiar, mientras que con<input type="text" el evento se dispara después de que el elemento pierde el foco o el usuario presiona enter.
• <datalist>tiene un soporte realmente irregular en todos los navegadores. La forma de mostrar todas las opciones disponibles es inconsistente, y las cosas solo empeoran a partir de ahí.

El último punto es realmente el más grande en mi opinión. Dado que tendrá que tener un respaldo de autocompletado más universal, entonces casi no hay razón para pasar por el problema de configurar a <datalist>. Además, cualquier complemento decente de autocompletar permitirá formas de diseñar la visualización de sus opciones, lo <datalist>que no funciona. Si hubiera <datalist>aceptado <li>elementos que pudieras manipular como quieras, ¡habría sido realmente genial! Pero no.

También en lo que puedo decir, la <datalist>búsqueda es una coincidencia exacta desde el comienzo de la cadena. Entonces si tuvieras<option value="internet explorer"> y buscado 'explorador', no obtendría resultados. La mayoría de los complementos de autocompletar buscarán en cualquier parte del texto.

Solo lo he usado <datalist>como un auxiliar de conveniencia rápido y perezoso para algunas páginas internas donde sé con 100% de certeza que los usuarios tienen la última versión de Chrome o Firefox, y no intentaré enviar valores falsos. Para cualquier otro caso, es difícil recomendar el uso <datalist>debido a la poca compatibilidad del navegador.

Datalist incluye autocompletar y sugerencias de forma nativa, también puede permitir que un usuario ingrese un valor que no está definido en las sugerencias.

Seleccionar solo le brinda opciones predefinidas que el usuario debe seleccionar

La Lista de datos es una nueva etiqueta HTML en navegadores compatibles con HTML5. Se presenta como un cuadro de texto con alguna lista de opciones. Por ejemplo, para el cuadro de texto Género, le dará opciones como Hombre Mujer cuando escriba 'M' o 'F' en el Cuadro de texto.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Para responder específicamente una parte de su pregunta "¿Hay alguna situación en la que sería mejor usar una u otra?", Considere un formulario con secciones repetidas. Si la sección de repetición contiene muchas selectetiquetas, entonces eloption deben representar s para cada selección, para cada fila.

En tal caso, consideraría usar datalistcon input, porque lo mismo datalistse puede usar para cualquier número de inputs. Potencialmente, esto podría ahorrar una gran cantidad de tiempo de representación en el servidor y se escalaría mucho mejor a cualquier número de filas.

Noté que no hay una función seleccionada en datalist. Solo le da opciones, pero no puede tener una opción predeterminada. Tampoco puede mostrar la opción seleccionada en la página siguiente.

Hay otra diferencia importante entre selecty datalist. Aquí viene el factor de soporte del navegador.

select es ampliamente compatible con navegadores en comparación con datalist. Por favor, eche un vistazo a esta página para obtener soporte completo del navegador de datalist--

Soporte de navegador datalista

Donde as select es compatible con todos los navegadores (desde IE6 +, Firefox 2+, Chrome 1+, etc.)

Es similar a select, pero datalist tiene funcionalidades adicionales como la sugerencia automática. Incluso puede escribir y ver sugerencias a medida que escribe.

El usuario también podrá escribir elementos que no están en la lista.