iter(g49): 新增 autoComplete 自动补全组件

This commit is contained in:
HIsheR
2026-10-26 12:12:52 +08:00
parent 1fa593317d
commit cb8a9ea357
12 changed files with 405 additions and 10 deletions
+31 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T04:11:34.965Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T04:12:36.698Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1255,6 +1255,35 @@ splitter({ sizes: ratio, min: 15, panes: [leftPanel, rightPanel], onChange: (s)
现场演示:apps/docs/demo.html#sec-splitter
### autoComplete — 自动补全 AutoComplete
参数:
- options(必填):AutoCompleteOption[] | ((q: string) => AutoCompleteOption[]) —— 候选项:静态列表或按关键字计算的函数(可远程联想)
- value:Signal<string> —— 输入值信号;不传则内部维护,传了即外部受控
- placeholder:string —— 占位文案,同时作为无障碍名称
- emptyText:string —— 无匹配时的提示文案;缺省「无匹配项」
- maxItems:number —— 最多展示条数;缺省 8
- disabled:boolean | Signal<boolean> —— 禁用输入与弹层
- onInput:(query: string) => void —— 每次输入回调,适合触发远程请求
- onSelect:(option: AutoCompleteOption) => void —— 选中回调(点击或 Enter)
示例:
```
autoComplete({ value: acValue, placeholder: '输入组件名', options: [{ value: 'dataTable', hint: '表格' }], onSelect: (o) => toast.success(o.value) })
```
手把手:
1. 输入任何字符即按包含匹配(忽略大小写)过滤候选,空串时弹层不展开
2. ↑↓ 在候选间环形移动并高亮,Enter 选中,Esc 收起,Tab 失焦也会收起
3. 候选行支持右侧 hint(分类 / 拼音),选中后值写回输入框并触发 onSelect
4. options 传函数时每次输入都会用当前关键字调用,可在此发起远程请求并返回新数组
5. value 传信号即受控:外部写入会同步回填输入框内容
现场演示:apps/docs/demo.html#sec-autocomplete
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1306,6 +1335,7 @@ API 速览:
- transfer(props):穿梭框,左右两栏勾选后整体搬运,targetKeys 信号双向绑定,两栏各自搜索与全选(含半选),禁用条目不参与搬运也不可勾选
- cascader(props):级联选择,多列联动面板(悬停下钻 / 点击提交),value 为路径数组信号,changeOnSelect 允许停在中间层,全键盘可操作
- splitter(props):可拖拽分栏容器,分隔条支持指针拖拽 / 方向键微调 / 双击复位,sizes 为百分比数组信号
- autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想
一行用法: