Cómo crear un Datalist que se pueda buscar instantáneamente

Las listas desplegables son una buena manera de proporcionando opciones para un campo de entrada, particularmente cuando la lista de opciones disponibles es larga. Un usuario puede elegir la opción que desee por escribiendo en el campo, o mira las opciones Eso puede ser un partido para lo que están buscando.. Ser capaz de buscar a través de las opciones., Sin embargo, es la solución ideal..

Este comportamiento se puede lograr con la Elemento HTML que muestra sugerencias de entrada para diferentes controles, como el etiqueta. sin embargo Solo muestra las opciones disponibles cuando el usuario tiene ya escribi algo en el campo de entrada.

Podemos hacer que un campo de entrada sea más útil si permitimos a los usuarios Accede a la lista completa de opciones. en cualquier momento durante el proceso de toma de entrada.

En este post, vamos a ver cómo crear un lista desplegable que se puede buscar en cualquier momento utilizando la etiqueta es lo mismo que la carné de identidad del etiqueta - así es como los unimos entre sí.

2. Haz que el Datalista sea visible

Por defecto, el Elemento HTML es oculto. Solo podemos verlo cuando empezar a escribir una entrada en el campo se adjunta el datalista.

Sin embargo, hay una manera de "forzar" el contenido del datalista (es decir, todas sus opciones) aparecer en la pagina web. Solo tenemos que darle un adecuado. monitor valor de propiedad otro que ninguna, por ejemplo bloqueo de pantalla;.

 datalist display: block;

Las opciones mostradas aún no son seleccionables en este punto, solo el navegador rinde las opciones se encuentra dentro del datalista.

Como se mencionó anteriormente, debido al comportamiento incorporado de la elemento, Una parte de las opciones ya aparecen y son seleccionables., pero solo cuando el usuario comienza a escribir una cadena en la que el navegador puede encontrar una opción coincidente.

También necesitamos encontrar un mecanismo para hacer todos opciones (en la captura de pantalla anterior que se muestra debajo del listado de datos desplegable) seleccionable a Cualquier otro punto del proceso de toma de entrada. - cuando los usuarios desean revisar las opciones antes de escribir algo, o mientras ya han introducido algo en el campo de entrada.

3. Traer en el Elemento HTML.

Elegiremos el segundo método, ya que es más sencillo y se puede usar como un mecanismo de reserva en los navegadores que no son compatibles con el elemento. Cuando un navegador no puede mostrar y visualizar el datalist, rinde el Etiqueta HTML, el código se ve a continuación:

Datalista Combinado con Añadiendo el múltiple atribuir a la etiqueta, de modo que cuando el usuario selecciona una opción de la lista desplegable, su valor se mostrará dentro de la campo también. / * cuando el usuario selecciona una opción de DDL, escríbala en el campo de texto * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Inconvenientes El principal inconveniente de esta técnica es la ausencia de una forma directa de estilizar el elemento con CSS (la aparición de la y