Cuántas veces hemos generado formularios con campos selects interminables (por ejemplo un listado de clientes, de países, de productos…). Navegar a través de un select de varios cientos de elementos es algo tedioso que seguramente tu cliente o empresa te pedirá solucionar.
Lo más óptimo sería ofrecer un campo de búsqueda dentro del propio select aprovechando jQuery y algo de CSS, lo que nos tocaría unas cuantas horas de investigar y programar.
Afortunadamente existe Select2, una librería pensada precisamente para esto, insertar un campo de búsqueda dentro del campo select que deseemos y que además sea sencillo de implementar.
Instalación de select2
Para empezar vamos a llamar a los dos archivos (css y js) necesarios para ejecutar el script y que tendrán que llamarse dentro del <head></head> de nuestra página.
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
Para WordPress tendremos que integrarlos a través de una función que podemos llamar en nuestro archivo de funciones (functions.php):
function buscador_en_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_en_select');
Como véis, hemos llamado también a jQuery, por si no está ya implementado en el tema y además hemos llamado a mi-script, que es un archivo que crearemos y subiremos al directorio del tema activo en la carpeta js (la crearemos si no existe).
Mi Script
Para integrar select2 crearemos un pequeño script en un archivo al que llamaremos mi-script.js y que guardaremos en la ruta /wp-content/themes/tema-activo/js/mi-script.js.
En él insertaremos el siguiente código:
jQuery(document).ready(function($){
$(document).ready(function() {
$('.mi-selector').select2();
});
});
La línea $(‘mi-selector’).select2() indica que a todos los select que especifiquemos con la clase ‘mi-selector’, se les aplicará la funcionalidad de integrar un buscador.
Por ejemplo:
<select class='mi-selector' name='marcas'>
<option value=''>Seleccionar una marca</option>
<option value='audi'>Audi</option>
<option value='bmw'>BMW</option>
<option value='citroen'>Citroen</option>
<option value='fiat'>Fiat</option>
<option value='ford'>Ford</option>
<option value='honda'>Honda</option>
<option value='hyundai'>Hyundai</option>
<option value='kia'>Kia</option>
<option value='mazda'>Mazda</option>
</select>
Se vería así:
También funciona perfecto con campos de selección múltiple, solo tenemos que especificarlo en el select, nombrándolo con corchetes (array) y especificando:
multiple="multiple"
<select class='mi-selector' name='marcas[]' multiple='multiple'>
Quedando así:
Como véis, muy sencillo de implementar y muy práctico. Seguro que nos sacará de más de un apuro.
Si te ha gustado, compártelo para que más gente pueda aprovecharlo. Nos vemos en el siguiente post 😉
Muy bueno, gracias!
Hola Daniel. ¿La integración de librerías puede realizarse dentro del mismo plugin que se está desarrollando?
Hola Ernesto, puedes declarar los archivos JS y CSS tanto en el functions.php del tema activo, como en un plugin de funciones que estés desarrollando. Saludos.