Poblar Select con jQuery, Select2 PDO MySQL
Select2 es un plugin de jQuery ampliamente utilizado. Hace que seleccionar elemento sea fácil de usar.
Poblar Select con jQuery. En este artículo veremos cómo poblar un select usando un plugin para realizar búsquedas en la etiqueta select. Además, vamos a interactuar con la base de datos MySQL para obtener la información y mostrarlo en la etiqueta de lista desplegable del HTML.
¿Cómo funciona el script?
- Primero usaremos el plugin (Select2) para poder incorporar la opción de búsqueda en la etiqueta Select.
- Segundo paso es inicializarlo para poder agregar estilo y un cuadro de búsqueda. En función del texto de búsqueda filtra las opciones.
- Tercero, usaremos base de datos para mostrar información. Por lo tanto, para darle dinamismo mediante el uso de jQuery AJAX al script sin recargar la página.
En este tutorial, mostraremos haciendo uso de un ejemplo de cómo se puede inicializar select2 plugin y cargar datos dinámicamente utilizando AJAX PDO y PHP.
Ver Demo
1. Descargar el plugin
- Primero descargue la biblioteca Select2 desde la plataforma GitHub (Repositorio Oficial) y también descargue la biblioteca jQuery.
- Extraiga los archivos descargados en el directorio del proyecto.
- Además, copie la biblioteca jQuery o declare mediante el uso de un CDN.
2. Estructura de la base de datos
Para este ejemplo usaremos una base de datos llamado «demo_select» y una tabla llamado «usuarios«. A continuación, veremos la estructura de la tabla usuarios y sus registros.
CREATE TABLE `usuarios` ( `id` int(11) NOT NULL, `usuario` varchar(80) NOT NULL, `nombres` varchar(80) NOT NULL, `email` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `usuarios` (`id`, `usuario`, `nombres`, `email`) VALUES (1, 'lucia01', 'Lucia Flores', 'lucia@mail.com'), (2, 'carlos02', 'Carlos Guillen', 'carlos@mail.com'), (3, 'hector03', 'Hector Carrasco', 'hector@mail.com'), (4, 'maria04', 'Maria Lazaro', 'maria@mail.com'), (5, 'camila05', 'Camila Fernandez', 'camila@mail.com'); ALTER TABLE `usuarios` ADD PRIMARY KEY (`id`); ALTER TABLE `usuarios` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
3. Configuración del script
Usaremos un fichero llamado «config.php» y dentro del el declarar líneas de código para conectarse a la base de datos mediante la tecnología PDO PHP.
<?php
$server = "localhost";
$username = "root";
$password = "";
$dbname = "demo_select";
// creamos la conexion con MySQL
try{
$db = new PDO("mysql:host=$server;dbname=$dbname","$username","$password");
$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
die('No se pudo conectar con la base de datos');
}
?>
4. HTML y estructura
En esta sección HTML incluiremos los componentes del plugin select2 y será declarada en la etiqueta head, veamos los elementos.
- select2.min.css
- jQuery
- select2.min.js
Código completo
<!doctype html> <html> <head> <title>Poblar Select con jQuery, Select2 PDO MySQL</title> <meta charset="UTF-8"> <!-- jQuery --> <script src='assets/js/jquery-3.4.1.min.js' type='text/javascript'></script> <!-- select2 css --> <link href='assets/plugin/select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'> <!-- select2 script --> <script src='assets/plugin/select2/dist/js/select2.min.js'></script> <!-- Styles --> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <div class="main"> <h1>Select Buscador</h1> <select id='buscador' style='width: 200px;'> <option value='0'>- Buscar usuarios -</option> </select> </div> </body> </html>
5. jQuery Ajax dinámico
- Inicialice select2 en <select id=’buscador’>
- Utilice la opción ‘Ajax’ para cargar datos.
- Establecer url: ‘proceso.php’, tipo: ‘post’, dataType: ‘json’.
- Con la opción ‘datos’ pasa el texto de búsqueda – palabraClave: params.term.
- Controle la respuesta AJAX con la opción ‘processResults’. Inicialice los resultados con la respuesta.
Código completo
<script>
$(document).ready(function(){
$("#buscador").select2({
ajax: {
url: "proceso.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
palabraClave: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
});
</script>
6. Archivo proceso.php
- Cree un nuevo archivo con el nombre proceso.php
- Compruebe si «palabraClave» es POST o no.
Si POST está declarado, a continuación, obtener 10 registros de la tabla de usuarios de lo contrario utilizar “palabraClave” para buscar en el campo de nombre en la tabla de usuarios. Sólo estoy buscando 10 registros. Si desea capturar todos los registros, quite la cláusula LIMIT de la consulta SQL o puede ajustar el valor de $numero_de_registros.
Bucle en los registros capturados.
Inicialice $response Matriz con claves id y text. Pase el id de usuario en la clave id y pase el nombre de usuario en la clave de texto.
Devolver $response matriz en formato JSON.
Código completo
<?php
include 'config.php';
// Numero de registros
$numero_de_registros = 10;
if(!isset($_POST['palabraClave'])){
// Obtener registros
$stmt = $db->prepare("SELECT * FROM usuarios ORDER BY nombres LIMIT :limit");
$stmt->bindValue(':limit', (int)$numero_de_registros, PDO::PARAM_INT);
$stmt->execute();
$usersList = $stmt->fetchAll();
}else{
$search = $_POST['palabraClave'];// Palabra a buscar
// Obtener registros
$stmt = $db->prepare("SELECT * FROM usuarios WHERE nombres like :nombres ORDER BY nombres LIMIT :limit");
$stmt->bindValue(':nombres', '%'.$search.'%', PDO::PARAM_STR);
$stmt->bindValue(':limit', (int)$numero_de_registros, PDO::PARAM_INT);
$stmt->execute();
$usersList = $stmt->fetchAll();
}
$response = array();
// Leer la informacion
foreach($usersList as $user){
$response[] = array(
"id" => $user['id'],
"text" => $user['nombres']
);
}
echo json_encode($response);
exit();
?>
Conclusión
Como han podido apreciar la implementación del plugin no es muy complicado y trabaja muy bien pudiendo adaptarse a nuestros requerimientos como programador web.
Solo debemos de Inicializar el plugin select2 en el elemento etiqueta select y utilice la opción ‘ajax’ para cargar datos de la base de datos. La matriz o bucle PHP devolverá registros de la BD (id y nombres).
Espero que este articulo le ayude a despejar dudas sobre la implementacion del buscador en tiempo real en la etiqueta SELECT del HTML
Ver Demo
Hola.
Te felicito por el trabajo que haces. Tus post me han ayudado mucho a aprender y sacar a adelante mi sistema.
Las explicaciones son simples y creo que con ejemplos se entiende mucho mejor los pasos a pasos. Felicidades.
Una cosita que noté, no sé si solo a mi me pasó:
He estado aprendiendo select2 con tus post y me fueron de mucha ayuda. Pero tienes dos links que tratan sobre ellos.
1- En una primera búsqueda me apareció este: https://www.baulphp.com/buscador-en-select-usando-select2-con-php-mysql/ .
En este caso el ejemplo de descarga no me funcionó. Primero arregle la conexión a BD xq como estoy haciendo pruebas todavía estoy usando root sin contraseña y está configurado como root:root en el conexion.php. Sin embargo eso no solucionó el problema, el index.php seguía sin mostrar el trabajo del select2.
2- En una segunda búsqueda me apareció este otro link https://www.baulphp.com/poblar-select-con-jquery-select2-pdo-mysql/.
En este caso seguí el paso a paso y si me funcionó. Descargué el ejemplo de prueba pero no lo he abierto porque ya el paso a paso me funcionó bien.
La única diferencia entre el link de descarga de 1 y el resultado de paso a paso de 2 creo que es las versiones de jquery y select2. Porque en el paso a paso descargue las versiones más recientes y en el ejemplo se usan versiones anteriores.
Ten en cuenta que no soy experta en la materia. Solo te digo lo que me sucedió por si te es de ayuda. A lo mejor no supe usar la descarga. Ya me dirás.
Saludos y felicidades una vez más. Me has salvado.