Inline multiple select with typeahead can be a very powerful UX addition. I had to understand how to build one from scratch for an experiment I’m working on (more on that soon).
How Inline MultiSelect Works
The popular Chosen plugin, focused
The “input box” isn’t actually a HTML input element. It’s just a div styled to look like an input, with an inline unordered list inside.
The “input box”
The list item for selected items is styled to look like a tag. It contain a span and a link. The span text strings are output together as an array like so: [“Sloth Bear”, “Polar Bear”].
The last list item contains the actual input element. The bigger “input box” listens for a click event and focuses this inner input element.
The actual input element
Once focused, the selector drop down unhides. It’s just a div styled with CSS box shadow for a nice “hover” effect.
It too contains an unordered list generated from source data.
A CSS class is applied for the active selector item.
Active selector item
There are many behind the scenes watchers for keyboard and mouse events. This is important to make the UX intuitive as the user would expect similar behaviors to a desktop app. For example, when inner input element is focused and empty, pressing backspace key once applies a CSS class to the last selected item. Pressing backspace again removes it from the unordered list of selected items.
Active selected item
How to Built One The AngularJS Way
- Reusable, customizable and testable component
- No external dependencies (Chosen requires jQuery or Prototype)
- Less code / more happiness