Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo crear un menú desplegable con el cuadro de búsqueda usando jQuery

 En este tutorial, veremos cómo agregar un cuadro de búsqueda en la lista desplegable. Cuando usamos el menú desplegable con una gran lista de valor, entonces se vuelve difícil para el usuario del sitio web seleccionar un valor particular. Agregar un cuadro de búsqueda al menú desplegable con jQuery ayuda a filtrar el valor de la lista.

Aquí usaremos la biblioteca jQuery select2 para obtener el menú desplegable con el cuadro de búsqueda. Veamos cómo crear un menú desplegable con un cuadro de búsqueda usando jQuery.

Pasos:
1. Descargue e incluya el archivo de biblioteca select2
2. HTML
3. JavaScript

Ver demostración

1. Descargue e incluya el archivo de biblioteca select2

Descargue e incluya el archivo select2 libray como JS y CSS.

Incluya el archivo Css y el archivo JS antes de la etiqueta de cierre de cabeza.

<! - CSS -> 
<link href = 'select2.min.css' rel = 'stylesheet' type = 'text / css'>
<! - JS ->
<script src = "https: // ajax .googleapis.com / ajax / libs / jquery / 3.3.1 / jquery.min.js "> </script>
<script src = 'select2.min.js' type = 'text / javascript'> </script>

2. HTML

<select name = "language" id = "dropdown"> 
<option value = "PHP"> PHP </option>
<option value = "MySQL"> MySQL </option>
<option value = "jQuery"> jQuery </ opción>
<option value = "AJAX"> AJAX </option> <option value = "JavaScript"> JavaScript </option>
</select>

3. JavaScript

<script> 
$ (documento) .ready (function () {
$ ("# dropdown"). select2 ();
});
</script>

Para obtener el script completo, haga clic en el botón de descarga. Si te gustó este artículo, no olvides compartirlo.

Publicar un comentario

0 Comentarios