io.search
Allows searching for arbitrary results from a search box.
Usage
- TypeScript
- JavaScript
- Python Experimental
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));
},
});
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));
},
});
async def on_search(query: str):
return [user for user in users if query in user.name]
def render_result(user):
return {
"label": user.name,
"description": user.email,
"image": {
"url": user.avatar,
"size": "small",
},
}
user = await io.search("Search for a user",
render_result=render_result,
on_search=on_search,
)
Multi-search
- TypeScript
- JavaScript
- Python Experimental
Starting with v0.37.0
, you can also accept multiple results at a time
using the .multiple()
chained method:
const selectedTags = await io
.search("Add tags to this blog post", {
renderResult: tag => tag.label,
onSearch: async query => {
return tags.filter(tag => tag.label.includes(query));
},
})
.multiple({
defaultValue: [
{ id: 12, label: "Web dev" },
{ id: 9, label: "Programming" },
],
})
.optional();
The .multiple()
method accepts an optional options object with a
defaultValue
property, which allows specifying the defaults for the
multi-input. Any singular defaultValue
prop from the search options object
will be discarded for .multiple()
inputs.
Optional multiple inputs with .multiple().optional()
are supported, but multiple optional inputs with .optional().multiple()
are not.
Starting with v0.37.0
, you can also accept multiple results at a time
using the .multiple()
chained method:
const selectedTags = await io
.search("Add tags to this blog post", {
renderResult: tag => tag.label,
onSearch: async query => {
return tags.filter(tag => tag.label.includes(query));
},
})
.multiple({
defaultValue: [
{ id: 12, label: "Web dev" },
{ id: 9, label: "Programming" },
],
})
.optional();
The .multiple()
method accepts an optional options object with a
defaultValue
property, which allows specifying the defaults for the
multi-input. Any singular defaultValue
prop from the search options object
will be discarded for .multiple()
inputs.
Optional multiple inputs with .multiple().optional()
are supported, but multiple optional inputs with .optional().multiple()
are not.
You can also accept multiple results at a time using the .multiple()
chained method:
async def on_search(query: str):
return [tag for tag in tags if query in tag.label]
def render_result(tag):
return tag.label
user = await io.search("Add tags to this blog post",
render_result=render_result,
on_search=on_search,
).multiple(default_value=[
{ "id": 12, "label": "Web dev" },
{ "id": 9, "label": "Programming" },
]).optional();
The .multiple()
method accepts an optional options object with a
default_value
property, which allows specifying the defaults for the
multi-input. Any singular default_value
prop from the search options object
will be discarded for .multiple()
inputs.
Optional multiple inputs with .multiple().optional()
are supported, but multiple optional inputs with .optional().multiple()
are not.
Props
- TypeScript
- JavaScript
- Python Experimental
defaultValue
Optional
T
disabled
Optional
boolean
helpText
Optional
string
initialResults
Optional
T[]
onSearch
Required
(query: string) => Promise<T[]>
placeholder
Optional
string
renderResult
Required
(result: T) => string | number | boolean | Date | object
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
defaultValue
Optional
T
disabled
Optional
boolean
helpText
Optional
string
initialResults
Optional
T[]
onSearch
Required
(query: string) => Promise<T[]>
placeholder
Optional
string
renderResult
Required
(result: T) => string | number | boolean | Date | object
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
default_value
Optional
T
disabled
Optional
bool
help_text
Optional
str
initial_results
Optional
Iterable[T]
on_search
Required
(str) -> Awaitable[Iterable[T]]
placeholder
Optional
str
render_result
Required
(T) -> PrimitiveValue | RenderableSearchResult
PrimitiveValue = str | int | float | bool | date | time | datetime
class ImageSchema(TypedDict):
url: NotRequired[str]
alt: NotRequired[str]
size: NotRequired[Literal["thumbnail", "small", "medium", "large"]]
class RenderableSearchResult(TypedDict):
label: PrimitiveValue
description: NotRequired[str]
image: NotRequired[ImageSchema]
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
.