Ray Shan


How Inline MultiSelect Works and How To Build One the AngularJS Way

TL;DR

Demo / Code


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

Let’s use the popular Chosen javascript plugin as an example:

The popular Chosen plugin, focused

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 “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”].

Selected items

Selected items

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

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.

Selector

Selector

It too contains an unordered list generated from source data.

Selector items

Selector items

A CSS class is applied for the active selector item.

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

Active selected item

How to Built One The AngularJS Way

AngularJS and its powerful Directives brings us:

  • Reusable, customizable and testable component
  • No external dependencies (Chosen requires jQuery or Prototype)
  • Less code / more happiness

Blah