• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Dani Sánchez - Gestionatuweb

Desarrollador web freelance - Dani Sánchez Gestionatuweb

  • ¿Eres agencia?
  • WordPress
    • Mantenimiento
    • Desarrollo
    • Soporte técnico
  • Cursos
  • Porfolio
  • Blog
  • Contacto
  • Solicita Presupuesto
Estás aquí: Inicio / Publicaciones / Crear un select con buscador integrado, gracias a select2

Publicaciones, Tutoriales, Wordpress / 22 de marzo de 2019

Crear un select con buscador integrado, gracias a select2

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 😉

Archivado en:Publicaciones, Tutoriales, Wordpress Etiquetado con:desarrollo web, formularios, programación web, publicaciones, select2, tutoriales, wordpress

Interacciones con los lectores

Este artículo puede contener código que podría no funcionar correctamente en tu versión de WordPress o causar incompatibilidad con tu plantilla o plugins. Úsalo bajo tu responsabilidad y haz siempre copia de tus archivos antes de modificarlos.

Comentarios

  1. Walter dice

    16 de diciembre de 2019 en 12:44

    Muy bueno, gracias!

    Responder
  2. ERNESTO MENDEZ dice

    15 de marzo de 2020 en 12:10

    Hola Daniel. ¿La integración de librerías puede realizarse dentro del mismo plugin que se está desarrollando?

    Responder
    • Daniel, Gestionatuweb.net dice

      16 de marzo de 2020 en 09:10

      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.

      Responder
  3. eduar dice

    15 de abril de 2020 en 01:31

    hola, a mi no e funciono, no cargan los datos, si aplica el estilo , pero no muestra los datos

    Responder
  4. juan dice

    27 de agosto de 2020 en 18:28

    se pueden modificar los atributos css?

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  Acepto la política de privacidad

Barra lateral primaria

Daniel Sánchez

@danisanchez82
t.me/gestionatuweb

Buscar en la web

Entradas recientes

  • Adiós WhatsApp…
  • Configuración de WP Fastest Cache
  • Cómo añadir un enlace personalizado en el menú admin de WordPress
  • Hooks de Genesis Framework (init, header y framework) – Parte 1
  • Añade el soporte de Genesis Framework para tus Custom Post

Categorías

  • Actualidad
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • Wordpress

Comentarios recientes

  • Carlos en Crear un WebView con Android Studio para cargar una web en una APP Android
  • william maffiold en Instalar LAMP y phpMyAdmin en MX Linux 19
  • dani en Divi, diseñar una plantilla predeterminada para cargar Custom Posts
  • dani en Subir un WordPress terminado de tu ordenador (local) al servidor final (hosting)
  • Carlos en Divi, diseñar una plantilla predeterminada para cargar Custom Posts

Hosting de confianza

Footer

Buscar en la web

  • Inicio
  • Agencias
  • Mantenimiento WordPress
  • Desarrollo WordPress
  • Soporte técnico WordPress
  • Cursos
  • Portfolio
  • Blog
  • Contacto
  • Política de privacidad

Mis redes

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

© 2016–2021 Gestionatuweb · Programado con Genesis Framework · Iniciar sesión

Utilizo cookies para obtener datos estadísticos sobre el uso de mi sitio web y personalizar la publicidad (no intrusiva) del blog según tus intereses. En ningún caso estas cookies te identifican como persona, solo a tu dispositivo en la Red. Aceptando el uso de cookies me ayudarás a mantenener el blog gracias a la publicidad y podré mejorar la experiencia de uso gracias a la analítica web. Puedes navegar por mi sitio web sin que se instale ninguna de estas cookies, aunque este mensaje permanecerá visible en todo momento.AceptoPolítica de privacidad