Select

Summary

A searchable single/multi select replacing AUI's Select2 wrapper (jQuery select2 3.x) with a zero-dependency implementation. The native <select> stays in the DOM and is kept in sync, so form submission and existing change listeners keep working.

Combobox-pattern accessible: role="combobox" + listbox options with aria-activedescendant tracking; arrows navigate, Enter selects, Esc closes, and Backspace in an empty multi-search removes the last pill. A closed single select opens on Enter, Space, or ↓; typing any character also opens it and seeds the search filter.

Examples

Single with search + clear:

Multi with pills:

JavaScript API

const sel = Neura.select('#assignee', {
  placeholder: 'Choose…',
  allowClear: true,
  data: [{ id: 'a', text: 'A' }],   // optional - replaces native options
  formatResult: (item) => item.text,
  formatSelection: (item) => item.text,
});
sel.val();            // 'a' (array in multi mode)
sel.val('a');
sel.open(); sel.close(); sel.enable(false); sel.destroy();

Member	Description
`Neura.select(selectOrSelector, opts?)`	Get or create the singleton instance for a native `<select>` (repeat calls return the same instance). The placeholder can also come from a `data-placeholder` attribute on the element.
`.val()` / `.val(value)`	Read or set the value. Multi mode returns an array and the setter accepts a single value or an array; `val('')` clears a single select (what the `allowClear` × button calls).
`.open()` / `.close()` / `.toggle()`	Show / hide / toggle the dropdown panel.
`.enable(enabled = true)`	Enable or disable. Syncs the native `disabled` property and the control's `aria-disabled`.
`.destroy()`	Remove the rendered control + dropdown and reveal the native `<select>` again.

formatResult / formatSelection return HTML. The defaults escape item.text, so custom formatters must escape untrusted content themselves.

Events

Every selection change (user pick, pill removal, or a programmatic val(...)) dispatches a native change event plus a neura-select-change CustomEvent on the hidden <select> (both bubble). e.detail.value is the current value: a string, or an array in multi mode.

CSS classes

All classes are rendered by the JS, not authored manually. They are listed here for styling hooks:

Class	Effect
`.neura-select`	The rendered control (`role="combobox"`). `.neura-select-multi` is added in multi mode; `[aria-disabled="true"]` styles the disabled state.
`.neura-select-value` / `.neura-select-placeholder`	Single-mode value text; the placeholder modifier applies while empty.
`.neura-select-arrow` / `.neura-select-clear`	The caret, and the × clear button rendered with `allowClear`.
`.neura-select-choices` / `.neura-select-pill` / `.neura-select-pill-remove` / `.neura-select-inline-input`	Multi-mode pill list, pills, per-pill × buttons, and the inline search field.
`.neura-select-dropdown`	The options panel, portaled to `<body>`.
`.neura-select-search`	Single-mode search box inside the dropdown.
`.neura-select-options` / `.neura-select-option`	The listbox and its options. `.active` marks the cursor row; `[aria-selected="true"]` / `[aria-disabled="true"]` style selected / disabled options.
`.neura-select-no-results`	"No matches" row shown when the filter excludes everything.

AUI compatibility

AJS.$('#assignee').auiSelect2({ placeholder: 'Choose…' });
AJS.$('#assignee').auiSelect2('val');        // getter
AJS.$('#assignee').auiSelect2('val', 'a');   // setter
// ajax/query/tags/createSearchChoice are not ported - they warn once
// and are ignored.