There are a lot of plugins that include some sort of select/option drop-down menu. Some of these plugins only have a handful of options to choose from, so leaving them as a pull-down menu is probably fine. Other plugins can potentially have a lot of options (think of a list of site users, posts, or some other unknown variable). Those menus can be very difficult for a user to scroll through. It would be nice to add searchable dropdown in your WordPress plugin’s menus.
jQuery Searchable Dropdown WordPress Plugins
Update: This post has been updated with instructions for using the Chosen library. The original post used the jQuery Searchable Dropdown Plugin. Steps are essentially the same, but I found the original version to be buggy.
Searchable drop-down menus are not built into jQuery, but we can use the jQuery Searchable Dropdown Plugin to extend the functionality of our select menus.
Steps
- Download the Chosen library
- Extract the ZIP’s contents into your plugin’s directory. In the example, we’re going to put the folder inside /my-plugin/js/chosen_v1.6.2
- Enqueue the JS and CSS files as needed. This tutorial will assume that we’re only worried about menus on the admin side.
- Add your own JS file that targets specific select menus.
Let’s get started.
I’m assuming you can handle steps 1 and 2 above without any guidance, so the remainder of this will focus on steps 3 and 4.
Enqueue JS and CSS files
In order for our plugin’s select menus to become the searchable dropdowns, we need to get the scripts and styles loaded.
The Chosen library contains one JS and one CSS file that we’ll need to load up. We also need to pull up our own JS file, which will target only certain select menus.
//Chosen JS wp_register_script( 'your_prefix_chosen_core_js', YOUR_PLUGIN_URL . '/js/chosen_v1.6.2/chosen.jquery.min.js', array( 'jquery' ), 1.0, false ); wp_enqueue_script( 'your_prefix_chosen_core_js' ); //Chosen CSS wp_register_style( 'your_prefix_chosen_core_css', YOUR_PLUGIN_URL . '/js/chosen_v1.6.2/chosen.min.css' ); wp_enqueue_style( 'your_prefix_chosen_core_css' ); } //Our own JS file wp_register_script( 'your_prefix_searchable', YOUR_PLUGIN_URL . '/js/your-js-file.js', array( 'jquery' ), 1.0, false ); wp_enqueue_script( 'your_prefix_searchable' ); |
Now, we need to add some content to our JS file. This file will tell the Chosen library which select menus should be searchable, and configure some default settings.
jQuery(document).ready(function() { jQuery("select.my-plugin-searchable").chosen({ disable_search_threshold: 1, allow_single_deselect: true, disable_search: false, no_results_text: "Oops, nothing found!", width: "95%" }) }); |
There are a lot of options available, and only a handful are included in the code above. You can check out their documentation for other options.
Now, we can add the class
my-plugin-searchable
to any select menus that we want to use the Chosen treatment for searchable drop-down menus.
Thank! The article was useful to me!
hi thank you for your share. But I am beginner can you create a video or explaind step 2? Do we create any folder?