# treeFilter

> Narrows a file tree as the reader types into its filter field: leaves that miss the query hide, every folder holding a match opens, folders with none hide, and a query matching no file shows the tree's no-matches line.

```ts
import { treeFilter } from "@sdxc/ui/app";
```

Filters the tree named by `options.tree` on every keystroke in the field it is applied to,
and moves focus from the field into the first visible row on ArrowDown, so a reader types,
then walks the results.

## Signature

```ts
treeFilter(options: TreeFilter.Options): MixinDescriptor<HTMLInputElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `TreeFilter.Options` | The tree to narrow. |

## Examples

```tsx
<input type="search" name="filter" mix={[treeFilter({ tree: "files" })]} />
```

## Used with it

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

### TREE_FILTER_TEXT_ATTRIBUTE

Attribute every file row carries, holding the path the filter matches.

#### Signature

```ts
const TREE_FILTER_TEXT_ATTRIBUTE = "data-filter-text"
```

### applyTreeFilter

Applies `query` to every row in `tree`. Folders are visited deepest first, so a folder
reads its subfolders' final state when it decides whether it still holds a match; the
tree's no-matches line shows only while a query leaves no file.

#### Signature

```ts
applyTreeFilter(tree: HTMLElement, query: string): number
```

Returns: How many files match.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `tree` | `HTMLElement` | The tree's root element. |
| `query` | `string` | What the reader typed; blank restores the whole tree. |

### TreeFilter.Options

Options for treeFilter.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `tree` | `string` | The `id` of the tree the field narrows. |