Una de mis librerías preferidas para la implementación avanzada de selects, es selectize.js
Son las funcionalidades de selector múltiple y de búsqueda entre un gran conjunto de datos, las que en su día hicieron que me decantara por ella.
Lo primero que vamos a necesitar para usar en WordPress, será importar la librería, tanto los ficheros js como los css.
// Our javascript wp_register_script ( 'nuestro-script', 'js/front.js', array ( 'jquery' ), '0.1', true ); wp_enqueue_script ( 'nuestro-script' ); // Selectize wp_register_style ( 'nuestro-selectize', 'css/selectize/selectize.css', array (), '0.1' ); wp_enqueue_style ( 'nuestro-selectize' ); wp_register_script ( 'nuestro-selectize', 'js/selectize/selectize.js', array ( 'jquery' ), '0.1', true ); wp_enqueue_script ( 'nuestro-selectize' );
Una vez importados, vamos a importar nuestro propio fichero javascript, que usaremos para realizar las llamadas y definir los selects a los que aplicar selectize. En nuestro caso vamos a plicarlo a un select con id «select-movies»
jQuery(document).ready( function($) { // Select de paises $('#select-paises').selectize({}); } );
Ahora vamos a la parte front, donde tendremos nuestro select, por ejemplo en una plantilla del tema, o en un shortcode.
<select name="paises[]" id="select-paises" multiple placeholder="Seleccione país" > <option value="es">España</option> <option value="fr">Francia</option> <option value="pt">Portugal</option> <option value="it">Italia</option> <option value="de">Alemania</option> </select>
Que tras aplicar selectize, nuestro visitantes podrán ver algo parecido a esto:
A continuación dejo un sencillo plugin con el que tras instalarlo, tendremos disponible la librería selectize.js en nuestro WordPress.
Además incluye un shortcode para poder probarlo, por lo que si usamos: [wpselectize_simple_example]
veremos un selector múltiple de países.
Cargando datos por ajax
Me he encontrado con el problema de tener que cargar las opciones del select dinámicamente por ajax, ya que en este caso podían ser un número muy elevado de opciones, y podría dar problemas de rendimiento en la web, por ejemplo al querer cargar 100.000 entradas.
Para la carga por ajax, vamos a tener dos partes diferencias, por un lado el fichero javascript encargado de dar la funcionalidad al select, y por otra parte, el fichero php que nos proporcionará los datos a cargar tras la búsqueda.
JS:
var $select = $('#ingrediente').selectize({ plugins: ['remove_button'], maxOptions: 10, valueField: 'id', labelField: 'name', searchField: 'name', load: function (query, callback) { if (!query.length) return callback(); $.ajax({ url: admin_url.ajax_url, type: 'POST', dataType: 'json', data: { action: 'get_ingredientes', name: query }, error: function () { callback(); }, success: function (result) { //callback(result); callback(result); } }); } });
PHP:
public static function ajax_get_ingredientes() { $productos = array(); $prods = get_terms( array( 'taxonomy' => 'ingrediente', 'name__like' => isset( $_POST['name'] ) ? sanitize_text_field( $_POST['name'] ) : '', 'hide_empty' => false ) ); if ( $prods ) { foreach ( $prods as $prod ) { $productos[] = array( 'id' => $prod->term_id, 'name' => $prod->name ); } } echo json_encode($productos); die(); }