Skip to main content

io.search

Allows searching for arbitrary results from a search box.

Usage

const user = await io.search("Search for a user", {
renderResult: user => ({
label: user.name,
description: user.email,
image: {
url: user.avatar,
size: "small",
},
}),
onSearch: async query => {
return users.filter(user => user.name.includes(query))
},
});
interval.com

Props

disabled

boolean Optional

Whether the search box is disabled.

helpText

string Optional

Optional label providing additonal context.

initialResults

T[] Optional

Array of arbitrary data objects.

onSearch

(query: string) => Promise<T[]> Required

Receives a search query string as argument, returns an array of arbitrary data objects. Your provided `onSearch` function is called whenever the search query changes, debounced to limit the number of calls.

placeholder

string Optional

Text to display in the input when no value is set.

renderResult

(result: T) => string | number | boolean | Date | object Required

Controls how objects from `initialResults` and `onSearch` are rendered. Receives a single data object as argument. May return either a primitive value or an object for more advanced customization:
renderResult: (result: T) =>
| string
| number
| boolean
| Date
| {
// the visible item label
label: string | number | boolean | Date;
// an optional description
description?: string;
// a visible image to be displayed alongside the result
// new in version 0.33.0
image?: {
// a URL to the image
url?: string
// the image alt tag
alt?: string
// the size of the image
size?: "thumbnail" | "small" | "medium" | "large"
}
// deprecated, replaced with image.url
imageUrl?: string
}

Returns

T

Examples

Typing

If using TypeScript, you can provide an optional type argument to io.search to aid it in inference for the return type and renderResult argument. TypeScript cannot always infer this automatically.

const selectedUser = await io.search<User>("Search for a user", {
renderResult: user => ({
label: user.name,
description: user.email,
image: {
url: user.avatar,
size: "small",
},
}),
onSearch: async query => {
return users.filter(user => user.name.includes(query))
},
});

In the example above, both user and selectedUser are properly typed as User.

Was this section useful?