Poblar Select con jQuery, Select2 PDO MySQL

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.

Tabla de contenidos

¿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

Poblar Select con jQuery, Select2 PDO MySQL

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

Cree un elemento <select id=’buscador’>.
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