Easily Filter Long MultiSelect Lists

The MultiSelect control started as a very simple drop-down with checkable options. Users could select one or more options and retrieve the list of selected items using the checkedItems property:

let multiselect = new MultiSelect('#theMultiSelect", {  
     itemsSource: countries  
 });

Users may scroll through the list with the mouse or use the keyboard to perform quick searches. Items can be selected by clicking or pressing the space bar. Users may also select or de-select all items by pressing the CTRL+A key.

A little after the release, some customers asked us to add a checkbox that would allow users to select or de-select all items with one click of the mouse. We liked the idea and added a showSelectAllCheckbox property, and everyone was happy:

let multiselect = new MultiSelect('#theMultiSelect", {  
     itemsSource: countries,  
     showSelectAllCheckbox: true  
 });

The "Select All" checkbox is more discoverable than the CTRL+A shortcut, so this was an excellent addition to the control.

But some customers wanted an extra feature: they had long lists of items and wanted a search/filter element that could be used to filter the items so they could pick from a smaller set of options. Excel offers something like that, and so does our FlexGridFilter class. We decided this was a good idea and added the showFilterInput property:

let multiselect = new MultiSelect('#theMultiSelect", {  
     itemsSource: countries,  
     showSelectAllCheckbox: true,  
     showFilterInput: true  
 });

Now users may type into the search box, and the list is filtered as they type. There's also a new checkOnFilter property that determines if filtered items should be checked automatically when the filter changes.

• MultiSelect Filtering JavaScript Demo
• MultiSelect Filtering Angular Demo
• MultiSelect Filtering React Demo
• MultiSelect Filtering Vue Demo

We think the latest version of the MultiSelect control is great, a lot more powerful and user-friendly than the first one. The drop-down control that appears when users open the list of choices is also a new control, the MultiSelectListBox.

Let's see if anyone has more suggestions to improve MultiSelect even further.

• MultiSelectListBox JavaScript Demo
• MultiSelectListBox Angular Demo
• MultiSelectListBox React Demo
• MultiSelectListBox Vue Demo

Read the full Wijmo 2020 v1 release.

If you have something interesting that you want to bring to our attention, we would love to hear it!