• Saltar a la navegación principal
  • Saltar al contenido principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto

Crear un select con buscador integrado, gracias a select2

El 22 de marzo de 2019 por dani 13 comentarios

Aviso: Esta entrada tiene 2 o más años, es posible que el método difiera ligeramente, las capturas de pantalla no se correspondan con la versión actual o que la herramienta/complemento ya no esté disponible.
Advertencia: Esta entrada contiene códigos o snippets que podrían no funcionar correctamente en tu instalación de WordPress, o podrían ser incompatibles con tu theme o plugins activos. Úsalos bajo tu responsabilidad, preferiblemente en un entorno de desarrollo y haz siempre copias de tus archivos antes de modificarlos.

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 como: desarrollo web, formularios, programación web, publicaciones, select2, tutoriales, wordpress

Interacciones con los lectores

Comentarios

  1. Filleral dice

    22 de marzo de 2022 a las 17:24

    Al momento de implementarlo me crea dos selct, dos combos como lo pdria solucionar?.

    Responder
  2. Federico Perroni dice

    20 de agosto de 2021 a las 18:58

    Muy bueno!!! Ya lo tengo implementado.

    La busqueda solo se realiza por texto? porque yo quiero también que busque por un atributo data.

    Mi ejemplo: Tengo un select de localidades, y cada option tiene un data con el codigo postal de dicha localidad, quiero buscar por el texto de la localidad o por el codigo postal que lo tengo en el data ,es posible esto?

    Responder
    • dani dice

      23 de agosto de 2021 a las 07:06

      Hola, pues desconozco si es posible buscar en los atributos data, tendrías que investigar en la documentación de la librería.

      Un saludo.

      Responder
  3. javier dice

    20 de mayo de 2021 a las 21:30

    ya pude, pero quiero saber como mostrar una tabla con el select del campo seleccionado

    Responder
    • dani dice

      24 de mayo de 2021 a las 08:53

      Si quieres mostrar un campo select con una de las opciones seleccionadas por defecto solo tienes que añadir la etiqueta selected al option que quieras.

      Responder
  4. Galleta dice

    10 de mayo de 2021 a las 22:12

    Hola, estoy conociendo apenas el Select2, estoy muy oxidada… mi duda es, en que parte vengo a llamar a:
    function buscador_en_select() ?

    Responder
  5. javier dice

    23 de enero de 2021 a las 10:56

    y para los que no usamos comodas plantillas de worpress y usamos nuestras manitas para paginar? esto no funciona

    Responder
    • dani dice

      23 de enero de 2021 a las 12:39

      Si no quieres usar cómodas plantillas de WordPress, saber que Select2 es una librería jQuery que funciona en cualquier página HTML.

      Responder
  6. juan dice

    27 de agosto de 2020 a las 18:28

    se pueden modificar los atributos css?

    Responder
  7. eduar dice

    15 de abril de 2020 a las 01:31

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

    Responder
  8. ERNESTO MENDEZ dice

    15 de marzo de 2020 a las 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 a las 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
  9. Walter dice

    16 de diciembre de 2019 a las 12:44

    Muy bueno, gracias!

    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

Hosting recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies