Cómo crear un datalista que se pueda buscar al instante

3. Trae el Elemento HTML

Hay dos formas de permitir a los usuarios ver y seleccionar todas las opciones cuando lo deseen:

1. Podemos agregar un controlador de eventos de clic a cada opción, y usarlo para seleccionar una opción cuando se hace clic en ella, o también podemos transformar las opciones en una lista desplegable real, que, por defecto, es seleccionable.
2. Podemos envolver las opciones del datalist con el

Elemento HTML

Elegiremos el segundo método, ya que es más simple, y se permite su uso como un mecanismo de respaldo en los navegadores que no son compatibles con el

Para ver todas las opciones de select en la lista desplegable, necesitamos usar los atributos multiple para mostrar más de una opción y el size para la cantidad de opciones que queremos mostrar.

 4. Agregue un botón de alternar 
Se supone que la lista desplegable completa solo aparece cuando el usuario hace clic en un botón de alternar junto al campo de entrada, mientras que el usuario escribe el datalist de trabajo que se muestra. Cambiemos el valor de display del datalist a none, y también agreguemos un botón al lado del campo de entrada, que alternará el valor de display del datalist, y por lo tanto activará la apariencia de select .
 datalist {display: none; } 
También necesitamos agregar el siguiente botón sobre el datalist en el archivo HTML:
 à ¢ Â-¼ 
Ahora veamos el JavaScript. Primero, definimos las variables iniciales .
 button = document.querySelector ('botón'); datalist = document.querySelector ('datalist'); select = document.querySelector ('select'); options = select.options; 
A continuación, debemos agregar un detector de eventos ( toggle_ddl ) al evento click del botón que alternará la apariencia del datalist .
 button.addEventListener ('click', toggle_ddl); 
Entonces, definimos la función toggle_ddl() . Para hacerlo, necesitamos verificar el valor de la propiedad datalist.style.display . Si se trata de una cadena vacía, el datalist está oculto, por lo que debemos establecer su valor para block, y también para cambiar el botón de una flecha que apunta hacia abajo a una flecha que apunta hacia arriba.
 function toggle_ddl () {/ * si DDL está oculto * / if (datalist.style.display === '') {/ * muestra DDL * / datalist.style.display = 'block'; this.textContent = "à ¢ Â-²"; } else hide_select (); } función hide_select () {/ * ocultar DDL * / datalist.style.display = ''; button.textContent = "à ¢ Â-¼"; } 
La función hide_select() oculta el datalist al volver a poner la propiedad datalist.style.display en una cadena vacía y al volver a cambiar la flecha del botón para que apunte hacia abajo.
En la configuración final, si los campos de entrada tienen una opción previamente seleccionada y la lista desplegable también se activó con un clic posterior, la opción seleccionada previamente también debe mostrarse como seleccionada en la lista desplegable.
Entonces, agreguemos el siguiente código resaltado a la función toggle_ddl() :
 function toggle_ddl () {/ * si DDL está oculto * / if (datalist.style.display === '') {/ * muestra DDL * / datalist.style.display = 'block'; this.textContent = "à ¢ Â-²"; var val = input.value; para (var i = 0; i 
También queremos ocultar la lista desplegable cuando el usuario está escribiendo en el campo de entrada (en el momento en que aparecerá el datalist activo).
 / * cuando el usuario quiere escribir en el campo de texto, esconde DDL * / input = document.querySelector ('input'); input.addEventListener ('focus', hide_select); 
 5. Actualizar entrada cuando se selecciona una opción 
Finalmente, agreguemos un manejador de eventos de change al  etiqueta, para que cuando el usuario seleccione una opción de la lista desplegable, su valor se muestre dentro del  campo también.
 / * cuando el usuario selecciona una opción de DDL, escríbala al campo de texto * / select.addEventListener ('change', fill_input); function fill_input () {input.value = opciones [this.selectedIndex] .value; hide_select (); } 
 Inconvenientes 
El principal inconveniente de esta técnica es la ausencia de una forma directa de