Autocomplete and selection widgets

The widgets contrib puts over a select or an autocomplete, from six modules at once, so they can be read against each other and against the three shapes core ships. Select2, Select A11y, Autocomplete Deluxe, Active Tags, Select or Other and one Chosen widget for the comparison: they solve the same problem and produce markup with nothing in common, so the theme has to meet each of them separately. Nothing is saved. The option lists are made up, so most of the page renders the same anywhere; the widgets that query the site for their suggestions say so, and their results are real.

Core, for comparison

The three shapes core ships, at the top of the page so the rest can be read against them. Everything below replaces one of these: a select that cannot be searched, checkboxes that do not scale past a screenful, and an autocomplete that shows nothing until it is typed into.

Select

One <select>, styled by the theme and opened by the browser. The drop is drawn by the operating system, so it cannot be themed and does not appear in the DOM.

Checkboxes

Every option is on the page at once, which is what makes it readable and what stops it scaling.

Rooms

Entity autocomplete

A textfield with a jQuery UI drop under it. The suggestions come from a selection handler of this module rather than from the site, so they are made up like everything else here; the value it submits is the label with the id in brackets after it.

Select2

Not installed on this site, so there is nothing here to look at. Install select2 to see its widgets in this page.

Select A11y

Not installed on this site, so there is nothing here to look at. Install select_a11y to see its widgets in this page.

Autocomplete Deluxe

Not installed on this site, so there is nothing here to look at. Install autocomplete_deluxe to see its widgets in this page.

Active Tags

Not installed on this site, so there is nothing here to look at. Install active_tags to see its widgets in this page.

Select or Other

A different problem: not how to choose from a long list, but what to do when the right answer is not on it. The element is a chooser plus a textfield, and the textfield is shown only while the "Other" option is the one selected -- through #states, so the toggling is core behaviour and needs no JavaScript of its own.

Select

The select carries an extra "Other" option the module appends. Choosing it reveals the textfield below; choosing anything else hides it again and its value is dropped.

Radios

The same element with a single-value button set instead of a select. The textfield sits after the last radio, which is the layout worth checking: it is inside the fieldset the radios are wrapped in.

Checkboxes

#multiple turns the buttons into checkboxes, and "Other" becomes one more thing that can be ticked alongside the rest rather than instead of them.

Chosen

Here for the comparison only. Chosen is the oldest of these and the one this project uses most, so it has a page to itself: every shape it takes, and a toolbar that pins the drop open so it can be inspected.

Multiple

The same job as the Select2 multiple above, in markup that shares none of its class names.

The Chosen widgets in full