AsyncSelect 异步选择器

支持异步数据加载和远程搜索的选择器组件。

安装

npm
yarn
pnpm
bun
deno
npx shadcn@latest add https://codebase.anyask.dev/r/async-select.json

基础用法

传入 service 函数异步加载选项数据。

远程搜索

启用 enableRemoteSearch 后,用户输入时会调用 service 函数进行远程搜索。支持防抖配置 searchDebounceWait

允许空搜索

通过 allowEmptySearch 控制搜索值为空时是否允许搜索。配合 initialLoad 可实现聚焦时加载全部数据。

数据依赖

通过 deps 监听依赖变化,当依赖项变化时会自动重新请求数据。

全部选项

设置 hasAllOptiontrue 会自动在选项列表顶部添加"全部"选项,其值默认为 null

API

AsyncSelect

异步选择器

属性说明类型默认值
service*请求函数(searchText?: string) => Promise<{ data: any[]; }>-
deps数据依赖项any[]-
ready是否准备好请求,默认 trueboolean-
hasAllOption是否显示全部选项boolean-
allOptionText全部选项的文案string-
fieldNames字段名映射FieldNames-
enableRemoteSearch是否启用远程搜索boolean-
searchDebounceWait搜索防抖延迟时间(毫秒),默认 500number-
initialLoad开启远程搜索时是否初始加载数据,默认为 falseboolean-
allowEmptySearch搜索值为空时是否允许搜索,默认 falseboolean-

继承 Ant Design Select 组件的其他属性(除 options)。