Buscador en SELECT usando Select2 con PHP MySQL

Buscador en SELECT usando Select2. En este artículo veremos la manera de implementar un buscador en tiempo real en nuestras etiquetas SELECT de HTML. Además, usaremos PHP PDO conjuntamente con la base de datos MySQL para obtener como un resultado dinámico.

¿Porque elegir un buscador en SELECT usando Select2?

En proyectos web siempre tenemos que llegar a usar la etiqueta SELECT y poblar con datos de MySQL para tener algo dinámico. Sin embargo, todo sería genial, pero si el contenido de esa lista desplegable es bastante, ahí si habría problemas para que el usuario final pueda elegir una opción.

Sería una molestia estar buscando opción por opción lo que desea elegir. Por lo tanto, pensando en esa problemática, hemos creado una solución idónea y muy simple.

¿Cuál sería la solución?

La solución sería ofrecer un campo de búsqueda dentro del propio SELECT usando librerías como jQuery y CSS. Sin embargo, para beneficio de nosotros existe Select2, un plugin que genera un buscador dentro de nuestro select.

Nota: Select2 es un plugín jQuery que nos permite tener un selector de elementos con un cuadro de búsqueda poniendo así más sencillo encontrar lo que desea seleccionar el usuario.

En un artículo anterior vimos cómo llenar datos a un select y ahora vamos a complementar esa entrada.

Pasos para implementar Buscador en SELECT usando Select2

• Descargar el plugin jQuery. – Este complemento lo podemos obtener gratuitamente desde su página oficial.
• Declarar las librerías. – Una vez descargado la librería debemos de declararlo dentro de la etiqueta HEAD.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- select2 css -->
<link href='select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>

<!-- select2 script -->
<script src='select2/dist/js/select2.min.js'></script>

Insertar un ID

Dentro de nuestro SELECT. – Posteriormente este ID lo usaremos para ejecutar un llamado a la base de datos mediante el uso de AJAX.

 <select id='selUser' style='width: 200px;'>
<option value='0'>- Search user -</option>
</select>

Implementar código Ajax

Aquí haremos uso del ID que está en nuestro SELECT. Además, usaremos un archivo PHP PDO para que realice la búsqueda en la base de datos.

$(document).ready(function(){
$("#selUser").select2({
ajax: {
url: "ajaxfile.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
});

Ventajas de implementar un buscador en SELECT usando Select2

• Es muy dinámico y ligero para buscar registros en MySQL
• Permite cargar datos dinámicamente usando jQuery AJAX.
• Nos ayuda a la hora en encontrar las opciones que el usuario requiere.
• Nos recarga la página o sistema web porque estamos usando Ajax.

Usando WordPress

Si estamos usando el CMS WordPress tendremos que integrarlos las librerías y plugins a través de una función que podemos llamarlo «buscador_select()» y debemos de agregar en el archivo de funciones (functions.php) de tu theme o child-theme.

function buscador_select(){
wp_enqueue_style('estilos-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css', array(),'1.0');
wp_enqueue_script('jquery'); 
wp_enqueue_script('script-select', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js', array('jquery'), '1.0');
wp_enqueue_script('mi-script', get_template_directory_uri().'/js/mi-script.js', array('script-select'),'1.0');
}
add_action('wp_enqueue_scripts', 'buscador_select');

Contenido y estructura del buscador en SELECT usando Select2

Los archivos que necesitamos son 3 archivos en PHP y el plugin de SELECT2. A continuación, veamos una imagen que representa el proyecto.

index.php

Es el archivo principal que contiene lo siguiente:

• Declaración del plugin y librerías
• Etiqueta select con el ID de búsqueda
• Script jQuery y Ajax para pedir información de MySQL

<!doctype html>
<html>
<head>
<title>Buscador en SELECT usando Select2 con PHP MySQL</title>

<meta charset="UTF-8">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- select2 css -->
<link href='./assets/select2v410/css/select2.min.css' rel='stylesheet' type='text/css'>

<!-- select2 script -->
<script src='./assets/select2v410/js/select2.min.js'></script>
<!-- Libreria español -->
<script src="./assets/select2v410/js/i18n/es.js"></script>

<!-- CDN -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script> 
-->
</head>
<body>

<select id='BuscarProductos' style='width: 300px;' lang="es">
<option value='0'>- Buscar producto -</option>
</select>

<script>
$(document).ready(function(){

$("#BuscarProductos").select2({
ajax: {
url: "extraer.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
});
</script>
</body>
</html>

Conexion.php

Es el encargado de realizar una conexión estable con la base de datos usando PDO para maximizar seguridad y consultas hacia la tabla donde contiene la información que el SELECT mostrara. Si observamos, la variable de conexión se llama $db

<?php
// Declaramos las credenciales de conexion
$server = "localhost";
$username = "root";
$password = "root";
$dbname = "e_buscadorselect";

// Creamos la conexion MySQL
try{
//Creamos la variable de conexión $b
$db = new PDO("mysql:host=$server;dbname=$dbname","$username","$password");
$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
die('Error: No se puede conectar a MySQL');
}
?>

extraer.php

Toda la magia de poblar y buscar la información en MySQL lo realiza este archivo bajo la petición del método POST «searchTerm«. Por lo tanto, el resultado se puede observar cuando el usuario le da un clic a la lista desplegable y puede ver 5 registros como base.

Además, si el usuario escribe una palabra clave, el plugin realizara una búsqueda a través de este fichero PHP y mostrara los resultados obtenidos de la base de datos al usuario que lo solicita.

<?php
require 'conexion.php';

// Número de registros recuperados
$numberofrecords = 5;

if(!isset($_POST['searchTerm'])){

// Obtener registros a tarves de la consulta SQL
$stmt = $db->prepare("SELECT * FROM productos ORDER BY nombre LIMIT :limit");
$stmt->bindValue(':limit', (int)$numberofrecords, PDO::PARAM_INT);
$stmt->execute();
$lista_productos = $stmt->fetchAll();

}else{

$search = $_POST['searchTerm'];// Search text

// Mostrar resultados
$stmt = $db->prepare("SELECT * FROM productos WHERE nombre like :nombre ORDER BY nombre LIMIT :limit");
$stmt->bindValue(':nombre', '%'.$search.'%', PDO::PARAM_STR);
$stmt->bindValue(':limit', (int)$numberofrecords, PDO::PARAM_INT);
$stmt->execute();
//Variable en array para ser procesado en el ciclo foreach
$lista_productos = $stmt->fetchAll();

}

$response = array();

// Leer los datos de MySQL
foreach($lista_productos as $pro){
$response[] = array(
"id" => $pro['id'],
"text" => $pro['nombre']
);
}

echo json_encode($response);
exit();
?>

¿Cómo configurar Select2 a español?

Pasar los parámetros que deseas directamente a la función de select2: y se puede hacer de dos formas:

Declaración en línea

Agrando estas líneas después de abrir el plugin SELECT2 para personalizar los textos emitidos a la hora de no encontrar resultados o la opción buscando.

$('select').select2({ 
/*agregar lineas*/
language: {

noResults: function() {

return "No hay resultado"; 
},
searching: function() {

return "Buscando..";
}
}
});

Declarar un archivo JS en español

Otra forma de configurar al español es agregar un archivo JavaScript que viene dentro del plugin que hemos descargado y declararlo en la etiqueta HEAD.

 <!-- Libreria español -->
<script src="./assets/select2v410/js/i18n/es.js"></script>

Agregar el parámetro lang

Justo al final de la etiqueta select debemos de agregar el atributo lang="es" y luego ya hemos terminado de configurar. Los mensajes saldrán en español.

 <select id='BuscarProductos' style='width: 300px;' lang="es">
<option value='0'>- Buscar productos -</option>
</select>

CONCLUSIÓN

En esta corta publicación hemos aprendido a instalar el plugin de búsqueda dentro de una lista desplegable (SELECT).

Hemos aprendido a declarar el plugin y las librerías necearías en la etiqueta HEAD. Sin embargo, podemos agregarle estilos CSS, framework Bootstrap y maquetación para que se vea como una interfaz profesional.

Por último, comentarles que esta implementación se base en no refrescar la página web o sistema web lo que conlleva a que no consuma recursos de datos de tu servidor.

Espero que este ejemplo puedan aplicarlo en sus sistemas web o páginas web, no se olviden de compartir este artículo en las redes sociales.