`<dj-search-box>`

A search field for free text plus typed key:value filters.

Configure the filters with keys. Typing a configured key and a colon, such as status:, starts a filter.

npm install @dojo-ng/search-box

import "@dojo-ng/search-box";

Filters

A key with options opens a suggestion popup. Pick an option to commit the filter.
A key without options takes a typed value. Enter or a space commits it. Put the value in quotes ("in progress") to include spaces.
A committed filter becomes a chip before the input. Each chip has a close button.
A word: that is not a configured key stays plain text, with no popup, no chip, and no error.
Backspace with the caret at the start of the input removes the last chip.

The tokenizer is the exported parseQuery, and formatQuery turns a query back into text. A backend can import both and parse the same syntax.

Property	Attribute	Type	Default
`keys`Configured filter keys. Keys with `options` get value suggestions; keys without take free text.	`keys`	`SearchKey[]`	`[]`
`label`	`label`	`string`	None
`placeholder`	`placeholder`	`string`	None
`position`	`position` reflected	`"above""below""left""right"`	`"below"`
`disabled`	`disabled` reflected	`boolean`	`false`

Event	Description
`dj-query-change`	`{ query }`
`dj-search`	`{ query }`

Style these with dj-search-box::part(name).

boxinputchipclearlabel

Property	Default	Description
`--dj-focus-ring`	None	Focus ring for the clear button (inherited token).

Method	Description
`setQuery(q: SearchQuery)`	Set the query programmatically, rendering its chips and text. Does not emit.
`clear()`	Clear all text and filters, emitting `dj-query-change`.
`focus(options: FocusOptions)`

The types that the properties above use, as they are declared in the source.

export interface SearchKey {
  key: string;
  label?: string;
  options?: ListOption[];
}

export interface ListOption { value: string; label: string; disabled?: boolean; divider?: boolean; }