# commandFilter

> Search-as-you-type filtering for a Command root: reads the query typed into the marked search input, hands it to a `FilterModel` instance, and mirrors the matched set onto the pre-rendered items as `hidden`, toggling the empty-state element.

```ts
import { commandFilter } from "@sdxc/ui/mixins";
```

Filters a Command root's pre-rendered items as the user types, hiding
everything that doesn't match the current query and toggling the
empty-state element when nothing does.

## Signature

```ts
commandFilter(model: FilterModel): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `model` | `FilterModel` | Behavior class instance owning the query, matched option set, and active option. |

## Examples

```tsx
let model = new FilterModel();
<Command mix={commandFilter(model)}>
	<Command.Input />
	<Command.Item id="home" value="Home">Home</Command.Item>
	<Command.Item id="settings" value="Settings">Settings</Command.Item>
	<Command.Empty>No matches</Command.Empty>
</Command>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### COMMAND_INPUT_ATTRIBUTE

Attribute the search input exposes itself on — `Command.Input`'s own
`<input>` carries this automatically, and `commandFilter()` forwards its
typed value into FilterModel.setQuery.

#### Signature

```ts
const COMMAND_INPUT_ATTRIBUTE = "data-command-input"
```

### COMMAND_ITEM_ATTRIBUTE

Attribute every filterable item exposes itself on — the same `data-value`
attribute `Command.Item` already sets, so pre-rendered items need no
extra wiring to become filterable; its value is matched against the query.

#### Signature

```ts
const COMMAND_ITEM_ATTRIBUTE = "data-value"
```

### COMMAND_EMPTY_ATTRIBUTE

Attribute the empty-state element exposes itself on — `Command.Empty`
carries this automatically. `commandFilter()` toggles its `hidden`
property opposite FilterModel.isEmpty.

#### Signature

```ts
const COMMAND_EMPTY_ATTRIBUTE = "data-command-empty"
```

### getCommandItemId

Resolves the id a DOM item correlates to a FilterModel.Option:
its own `id` attribute when set, doubling as an `aria-activedescendant`
target, otherwise its position among the other items.

#### Signature

```ts
getCommandItemId(item: HTMLElement, index: number): string
```

Returns: The id to correlate this item with in the model's option set.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `item` | `HTMLElement` | Item element read from the DOM. |
| `index` | `number` | Item's position among the other items carrying COMMAND_ITEM_ATTRIBUTE. |