SearchInput | Tuff Docs

Usage

Enter emits search immediately.

Loading demo...

remote emits search once typing pauses for searchDebounce ms; the host renders the results panel.

Loading demo...

TxSearchInput takes the keyword, TxSearchSelect the scope, and TxSearchEmpty shows when nothing matches.

Loading demo...

Use TxSearchInput for keyword-and-Enter flows; use TxSearchSelect when results need a panel or the picked value fills the field.
With remote, Enter and the debounce can emit the same query, so keep request handling idempotent.
Don't rely on the placeholder alone for meaning; give dense toolbars an external label or context.
Set searchDebounce to 0 only for local or fully cached searches.
Use TuffInput directly when you need a custom prefix or suffix.

Prop	Type	Default	Description
`modelValue`	`string`	`''`	Input value, bound with `v-model`.
`placeholder`	`string`	`'Search'`	Placeholder text.
`disabled`	`boolean`	`false`	Blocks typing, clearing, and remote search.
`clearable`	`boolean`	`true`	Shows the clear button when there is a value.
`remote`	`boolean`	`false`	Emits debounced `search` events while typing.
`searchDebounce`	`number`	`200`	Remote-search debounce in milliseconds.

Event	Params	Description
`update:modelValue`	`(v: string)`	Fires when the input value changes.
`input`	`(v: string)`	Fires together with `update:modelValue`.
`focus`	`(e: FocusEvent)`	Fires when the input gains focus.
`blur`	`(e: FocusEvent)`	Fires when the input loses focus.
`clear`	-	Fires after the clear button resets the value.
`search`	`(v: string)`	Fires on Enter, and with `remote` also after the debounce.

Name	Type	Description
`focus()`	`() => void`	Focuses the input.
`blur()`	`() => void`	Blurs the input.
`clear()`	`() => void`	Clears the value and emits `clear`.
`setValue(v)`	`(v: string) => void`	Sets the input value.
`getValue()`	`() => string`	Returns the input value.

Wraps TuffInput with a built-in search icon; clearing and the exposed methods forward to TuffInput.
Source: packages/tuffex/packages/components/src/search-input/.

packages/tuffex/packages/components/src/search-input/index.ts