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 监听依赖变化,当依赖项变化时会自动重新请求数据。

全部选项

设置 hasAllOption 为 true 会自动在选项列表顶部添加"全部"选项,其值默认为 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)。