Los dropdown multiselect son un elemento web que nos ayuda a seleccionar múltiples opciones a través de un desplegable. Son muy útiles para aquellos formularios en el que uno de los campos tengamos que elegir muchas opciones sin que sea un tedio para el usuario. En este tutorial veremos cómo implementar un dropdown multiselect dinámico utilizando PHP y MySQL. En este tutorial cubriremos en sencillos pasos cómo mostrar un desplegable en el cual se puedan seleccionar múltiples opciones que están extraídas de una tabla MySQL. En dicho desplegable también añadiremos la opción de buscar en el contenido y de seleccionar y deseleccionar todas las opciones.
La estructura de ficheros que utilizaremos para llevar a cabo nuestro dropdown multiselect con buscador con PHP y MySQL es esta:
- index.php
- multiselect.js
- app.js
- getData.php
Paso 1: Crear tabla de MySQL
Para llenar de datos dinámicamente nuestro menú desplegable, debemos crear una tabla en nuestra base de datos MySQL. Para ello crearemos la tabla employee utilizando el código que os muestro más abajo. También tendremos que agregar unos cuantos registros para luego hacer pruebas.
CREATE TABLE `employee` ( `id` int(11) NOT NULL COMMENT 'primary key', `employee_name` varchar(255) NOT NULL COMMENT 'employee name', `employee_salary` double NOT NULL COMMENT 'employee salary', `employee_age` int(11) NOT NULL COMMENT 'employee age' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Paso 2: Incluir Bootstrap, AngularJS y archivos CSS
En este ejemplo utilizaremos Bootstrap y AngularJS, por lo que tendremos que incluir dichos ficheros en nuestro documento HTML. También incluiremos el módulo Multiselect de Angular para gestionar la funcionalidad multi select en nuestro desplegable.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <link data-require="[email protected]" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /> <script src="multiselect.js"></script> <script src="app.js"></script> <link rel="stylesheet" href="style.css" />
Paso 3: Diseñar el formulario con Angular
Diseñaremos nuestro desplegable en index.php con Angular Application y Controller. El HTML para el desplegavle los gestionaremos con multiselect.js utilizando multiselect.tmpl.html. Los nombres de los empleados los listaremos en el desplegable dinámicamente.
<div class="container" ng-app="multiselect_app" ng-controller="multiselect_controller">
<h2>AngularJS Multiselect Dropdown using PHP & MySQL</h2>
<h4>View Details of Employee</h4>
<multiselect class="input-xlarge" multiple="true"
ng-model="selectedEmp"
options="c.name for c in emp_list"
change="selected()" ></multiselect>
{{selectedEmp}}
</div>
Paso 4: Cargar el contenido del desplegable dinámicamente
Ahora, en app.js, utilizaremos Ajax para realizar una petición Ajax a getData.php para obtener la información del empleado y asignarlo a la variable emp_list. Después mostraremos la información de dicha variable en index.php.
(function(angular) {
'use strict';
var app = angular.module('multiselect_app', ['ui.multiselect']);
app.controller('multiselect_controller', function($scope, $http) {
$scope.emp_list = '';
$http.get('getData.php').success(function(empData){
$scope.emp_list = empData;
});
});
})(angular);
Paso 5: Extraer información de la base de datos
Finalmente, obtendremos los registros de la tabla employee de nuestra base de datos MySQL y los almacenaremos en un array que devolveremos en formato JSON.
<?php
$sql = "SELECT id,employee_name as name FROM employee LIMIT 20";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$emp_data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$emp_data[] = $rows;
}
echo json_encode($emp_data);
exit;
?>