Cómo añadir un componente tipo desplegable (lista de elementos para selección) con búsqueda incorporada en nuestro sitio web. Este componente admite el entorno visual Bootstrap 5. Mostramos todos los componentes adicionales necesarios para su funcionamiento y un ejemplo en PHP para obtener el elemento seleccionado en un formulario.
- Requisitos necesarios para el funcionamiento del componente desplegable con búsqueda.
- Fichero PHP y HTML con el componente desplegable con búsqueda de ejemplo.
- Funcionamiento del sitio web con desplegable selector con búsqueda incorporada.
Requisitos necesarios para el funcionamiento del componente desplegable con búsqueda
Si queremos usar Bootstrap (no es necesario para este componente, es una opción) necesitaremos disponer de este paquete en la carpeta correspondiente de nuestro sitio web. Dispondremos tanto de los ficheros CSS como de los ficheros JavaScript para BootStrap 5.
Por otro lado, requeriremos de la librería JQuery. Aunque no es lo más adecuado por motivos de seguridad, este componente de desplegable (equivalente a un ComboBox en programación de escritorio) con búsqueda lo requiere. En concreto la versión 3.3.1.
Por último, necesitaremos el propio componente que muestre el combo selector con búsqueda. En este caso usaremos el componente Select2.
En el siguiente enlace dejamos todos los ficheros anteriores necesarios para el funcionamiento del componente desplegable con búsqueda (selector, ComboBox), así como un ejemplo de uso:
Fichero PHP/HTML con el componente desplegable con búsqueda de ejemplo
El código HTML de la página de ejemplo que muestra desplegables con búsqueda de ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<html lang="es"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Componente Desplegable Selector con búsqueda - ProyectoA</title> <!-- CSS necesarios para Select2 --> <!-- Si se quiere usar BootStrap 5 (no es necesario para el componente Select2, aunque lo admite --> <link href="componentes/bootstrap5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- CSS para desplegable con búsqueda (select2) --> <link href="componentes/select2/css/select2.min.css" rel="stylesheet" /> <!-- JavaScript necesarios para Select2 --> <!-- JQuery 3.3.1 --> <script src="componentes/jquery/jquery-3.3.1.min.js"></script> <!-- Select2 --> <script src="componentes/select2/js/select2.min.js"></script> </head> <body> <div class="wrapper"> <div class="container"> <div class="page-inner"> <div class="row"> <div class="col"> <!-- Comprobamos si se ha pulsado el botón Guardar --> <?php // Como ejemplo cogeremos los valores a elegir en el desplegable de una lista (array) // Para establecer la propiedad value a otro valor diferente al que se muestra, le asignamos un código a cada elemento $listaElementos = [ "Facturas" => "1", "Albaranes" => "2", "Contabilidad" => "3", "Stock" => "4", "Almacén" => "5", "Recursos Humanos" => "6" ]; $mostrarFormulario = false; //Si se ha pulsado el botón guardar mostramos el valor elegido if (filter_input_array(INPUT_POST)) { if (isset($_POST["seleccion1"])) { $seleccion = htmlspecialchars($_POST["seleccion1"]); if (!empty($seleccion)) echo("Ha seleccionado el elemento $seleccion con valor: " . array_search($seleccion, $listaElementos)); else echo("La selección está vacía"); //Mostramos un botón para volver a la selección ?> <form action ="desplegable_selector_ProyectoA.php" method = "POST"> <button type="submit" name="button"> Volver a la selección</button> </form> <?php } else $mostrarFormulario = true; } else // Si no se ha pulsado el botón Guardar mostramos el formulario con el desplegable $mostrarFormulario = true; if ($mostrarFormulario) { ?> <div class="form-group"> <!-- form-group --> <form action="desplegable_selector_ProyectoA.php" method="post" id="formuario1"> <div class="select2-input"> <!-- select2-input --> <label for="seleccion1">Seleccione un elemento</label> <select class="form-control" name="seleccion1" id="seleccion1"> <?php // Como ejemplo también, elegimos un elemento como el seleccionado por defecto en el Desplegable $valorSeleccionado = "Contabilidad"; // Recorremos cada elemento del array para mostrarlo en el desplegable // separando el código del nombre a mostrar foreach ($listaElementos as $eleMostrar => $eleValor) { if ($valorSeleccionado != "" && $eleMostrar == $valorSeleccionado) { echo "<option selected value='$eleValor'>$eleMostrar</option>"; } else { echo "<option value='$eleValor'>$eleMostrar</option>"; } } ?> </select> </div> <!-- End select2-input --> </form> <button type="submit" form="formuario1">Guardar</button> </div> <!-- End form-group --> <!-- Java Script necesario para activar el desplegable con Select2 --> <script> $('#seleccion1').select2( { //Se le pueden pasar parámetros de configuración y comportamiento //theme: "bootstrap" }); </script> <?php } // Cerramos la comprobación de si se muestra el formulario ?> </div> </div> </div> </div> </div> </body> </html> |
Funcionamiento del sitio web con desplegable selector con búsqueda incorporada
Nuestra página mostrará un desplegable con los elementos establecidos en el array. Estos elementos se puede obtener de cualquier otro sitio, como desde una tabla de una base de datos. Por defecto, aparecerá seleccionado el elemento «Contabilidad»:
Si pulsamos en el desplegable, podremos buscar los elementos directamente escribiendo cualquier palabra que puedan contener:
Si elegimos el elemento y pulsamos en «Guardar»:
Nos mostrará otra ventana con el elemento elegido (su código y su valor):
