Using select2 dropdowns in Toolset

Sometimes creating parametric search pages with a lot of filters and data can make the whole experience pretty annoying. I don’t want huge lists of checkboxes if there a many values. A tiny search option with a nice select2 dropdown would be a great user experience improvement in these cases. Fortunately Toolset is a robust and great system so it is rather easy to get you covered.

How to use select2 for dropdowns in Toolset?

The „select2“ system is a JavaScript library that converts dropdowns to searchable nice complex fields. You may have seen those a lot around the web already. They look familiar and are a great means for interface design. Toolset on the contrary thus has the select2 library implemented but uses it only ion rare cases such as within relationship forms whenever there are more than (I guess) 10 posts to choose from. Nonetheless, you might want to force this or you might want to use the library on your nice parametric search pages.

Luckily just follow these two simple steps and you are good to go:

Add this to your views JS section:

The following code just searches for all instances of fields that have a class starting with „wpv-“ and applies the select2 call to them which turns them into select2 fields. It is pretty straight forward but you might change the query where the call is applied on if you just want specific fields or another global filter.

The second part makes sure that whenever yu start filtering, and have the option enabled to update the available filters live via ajax, the dropdowns get refreshed. Is is done by using the toolst specifiv on.js_event_wpv_parametric_search_form_updated event.

//ON INITIAL LOAD: convert all fields with a "wpv-..." class to select2 fields
jQuery(document).ready(function() {
  jQuery('select[name*="wpv-"]').select2(); 
}); 

//IF SEARCH IS UPDATED: When using ajax updates for the options you need to refresh the select2 dropdowns
jQuery(document).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
  jQuery('select[name*="wpv-"]').select2("destroy");
  jQuery('select[name*="wpv-"]').trigger('change.select2'); // Notify only Select2 of changes
  jQuery('select[name*="wpv-"]').select2();
});

Add this to your functions.php

You still need the library to be loaded at all times and not only when Toolset thinks it is needed. So you also need to input something in your functions.php file to make sure the library is available in the view.

add_action( 'admin_enqueue_scripts', 'knowboard_select2_enqueue' );

function knowboard_select2_enqueue() {
	wp_enqueue_style('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css' );
	wp_enqueue_script('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js', array('jquery', 'select2') );

	//this is optional and an alternative to the code above you can also load it from your child-theme directory if you place the files there:
	//wp_enqueue_style('select2', get_stylesheet_directory_uri() . '/select2/select2.min.css' );
	//wp_enqueue_script('select2', get_stylesheet_directory_uri() . '/select2/select2.min.js', array( 'jquery', 'select2' ) ); 
}

Now you are all set and ready to go. The selct2 JS and CSS files are loaded via functions.php and the call to transform the dropdowns is made directly in the view with the search. If you wan to know more you may want to give this blog a read.