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.