Multiselect con bootstrap y jquery

Definición: Un multiselect es un componente de interfaz de usuario (UI) que permite a los usuarios seleccionar múltiples opciones de un conjunto predefinido. A diferencia de los menús desplegables o listas simples que permiten una sola selección, el multiselect permite seleccionar varias opciones simultáneamente, ofreciendo una interfaz interactiva y flexible para la gestión de selecciones múltiples.

Características Principales:

Selección Múltiple: Los usuarios pueden seleccionar más de una opción de la lista. Esto se puede hacer generalmente a través de casillas de verificación (checkboxes) o mediante un menú desplegable que permite la selección múltiple.
Interfaz de Usuario:
- Desplegable: El multiselect puede presentarse como un menú desplegable que se expande cuando el usuario hace clic en el campo. En este menú, los usuarios pueden seleccionar múltiples opciones.
- Lista Visible: Alternativamente, se puede mostrar una lista de opciones con casillas de verificación visibles, permitiendo a los usuarios seleccionar varias opciones sin necesidad de desplegar un menú.
Filtrado: Muchas implementaciones avanzadas de multiselect incluyen un campo de búsqueda o filtrado que permite a los usuarios encontrar rápidamente las opciones que desean seleccionar, especialmente en listas extensas.
Visualización de Selecciones: Muestra las opciones seleccionadas dentro del componente, y permite deseleccionar opciones si es necesario. Esto suele hacerse mediante una lista de opciones seleccionadas que se muestran en el campo del selector.
Funcionalidades Avanzadas:
- Selección/Deselección de Todo: Permite a los usuarios seleccionar o deseleccionar todas las opciones con un solo clic.
- Ordenación y Agrupación: Algunas versiones avanzadas permiten agrupar y ordenar las opciones para mejorar la organización.

...

Beneficios del Multiselect:

Flexibilidad: Proporciona una forma versátil de seleccionar múltiples opciones simultáneamente, adaptándose a las necesidades variadas de los usuarios.
Eficiencia: Permite realizar selecciones complejas de manera rápida y sencilla, ahorrando tiempo al evitar múltiples interacciones para seleccionar varias opciones.
Mejora de la Experiencia del Usuario: Ofrece una interfaz interactiva y amigable que facilita la selección de opciones múltiples, mejorando la usabilidad y la experiencia general del usuario en formularios y aplicaciones.
Reducción de Errores: Al permitir la selección múltiple dentro de un solo control, minimiza el riesgo de errores que pueden ocurrir al realizar múltiples selecciones en diferentes campos o formularios.

Ejemplos de Uso:

Filtros de Búsqueda: Permite a los usuarios seleccionar múltiples criterios para refinar los resultados de búsqueda, como seleccionar varias categorías de productos en una tienda en línea.
Encuestas y Formularios: En encuestas y formularios donde se requiere recoger respuestas múltiples, como seleccionar varias preferencias o respuestas a una pregunta.
Configuraciones de Usuario: Permite a los usuarios configurar preferencias o ajustes personalizados, como activar múltiples notificaciones o seleccionar varios temas en una aplicación.
Asignación de Roles o Permisos: En aplicaciones de administración, facilita la asignación de múltiples roles o permisos a un usuario de manera eficiente.

Implementación Técnica:

HTML y JavaScript: El componente multiselect se puede implementar utilizando HTML para la estructura básica y JavaScript para la funcionalidad avanzada. Muchos plugins y bibliotecas, como Bootstrap Multiselect, proporcionan una solución lista para usar que facilita su integración.
CSS: Se utiliza para estilizar el componente, asegurando que se integre bien con el diseño general de la interfaz de usuario.

Codigo completo

Este ejemplo tiene una solicitud ajax a: ajax/etiqueta.php onde enviamos tanbien la accion=10.

En el servidor buscamos los valores en la base de datos y los retornamos en la respuesta.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Multiselect Ejemplo</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Bootstrap Multiselect CSS -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
</head>

<body>
    <div class="container mt-5">
        <h2>Ejemplo de Bootstrap Multiselect con Checkboxes</h2>
        <form>
            <div class="form-group">
                <label for="selectEtiqueta">Seleccione una categoría</label>
                <select id="selectEtiqueta" multiple="multiple" class="form-control">
                    <!-- Opciones serán añadidas por AJAX -->
                </select>
            </div>
        </form>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap Multiselect JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js">
    </script>

    <script>
    function obtenerEtiquetas() {
        $.ajax({
            type: "POST",
            url: "ajax/etiqueta.php",
            data: {
                accion: 10
            },
            dataType: "json",
            success: function(etiquetas) {
                console.log(etiquetas); // Verifica los datos en la consola
                $("#selectEtiqueta").empty(); // Limpia las opciones actuales
                $.each(etiquetas, function(index, etiqueta) {
                    $("#selectEtiqueta").append('<option value="' + etiqueta.idEtiqueta + '">' +
                        etiqueta.etiqueta + '</option>');
                });

                // Inicializa multiselect solo después de que las opciones se han añadido
                $('#selectEtiqueta').multiselect({
                    includeSelectAllOption: true,
                    nonSelectedText: 'Selecciona una o más opciones',
                    selectAllText: 'Seleccionar todo',
                    allSelectedText: 'Todas las opciones seleccionadas',
                    nSelectedText: 'opciones seleccionadas',
                    buttonWidth: '100%',
                    enableFiltering: true,
                    maxHeight: 200,
                    templates: {
                        button: '<button type="button" class="multiselect dropdown-toggle btn btn-light text-left" data-toggle="dropdown" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" title="{{selectedText}}"><span class="multiselect-selected-text">{{selectedText}}</span> <b class="caret"></b></button>'
                    }
                });
            },
            error: function(error) {
                console.error("Error en la solicitud AJAX de Etiquetas:", error);
            }
        });
    }

    $(document).ready(function() {
        obtenerEtiquetas();
    });
    </script>
</body>

</html>

--------------------------------------------------------------------------------------------------------------------

tabla de las etiquetas:

Aqui te muestro como crear la tabla en SQL:

-----------------------------------------------------------------------------------------------------------------------

html

-- Crear la tabla 'etiquetas'

CREATE TABLE IF NOT EXISTS etiquetas

( idEtiqueta INT AUTO_INCREMENT PRIMARY KEY,

etiqueta VARCHAR(255) NOT NULL, UNIQUE KEY (etiqueta) -- Asegura que los valores de 'etiqueta' sean únicos );

-----------------------------------------------------------------

Codigo del Servidor (PHP)


<?php
    case '10':
        try {
            // Realiza la consulta para obtener las categorías
            $sql = "SELECT * FROM etiquetas ORDER BY etiqueta ASC";
            $stmt = $pdo->prepare($sql);
            $stmt->execute();

            // Obtiene los resultados en un array asociativo
            $response = $stmt->fetchAll(PDO::FETCH_ASSOC);

            // Devuelve los resultados como JSON al cliente
            header('Content-Type: application/json');
            echo json_encode($response);
        } catch (PDOException $e) {
            error_log('Error en etiqueta.php: ' . $e->getMessage());
        }
        break;
?>

----------------------------------------------------------------------------------------------------------------

Ir al indice