On a recent project, we needed a UI element that allows multiple selection of items from a long list of multi-word options. We wanted to optimize the workflow for data entry as that was the primary function of this part of the application, so the ability to find entries by typing a few characters was very important.

After searching around, we came across the Chosen.js library from Harvest.

Chosen.js gave us good-looking single- and multi-select widgets with really nice keyboard filtering.

I won’t repeat the documentation here, but there are a number of options for configuring the widgets, including the ability to search by single words within a multi-word option, to search within words or just at the beginning of words, and whether you can delete selected items with a single backspace.

Overall, Chosen.js worked great for our project, but we did find one issue that we needed to work around. In one context, our selection widgets were initially hidden. When later revealed, the widgets were not displaying correctly. A little searching found multiple mentions of this issue with a number of workarounds. Ultimately, this description from the documentation of the width option was the solution for us:

By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.

If you need a good single or multi-selection widget with keyboard search capability, I recommend you give Chosen.js a look.