组合输入与自动补全
Combobox / Autocomplete
把可编辑文本和建议列表放在同一交互中。
原生 datalist，允许自由输入
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'combobox'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
从较大集合查找，或输入后选择一个对象。
什么时候不用
只需固定少量选项时，Select 更直接。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "输入或选择框架" |
name | "sample-framework" |
value | "" |
placeholder | "例如 React" |
options | ["React","Vue","Svelte","Solid"] |
help | "原生 datalist，允许自由输入" |
disabled | false |
id | — |
attributes | — |
required | — |
readOnly | — |
min | — |
max | — |
step | — |
minLength | — |
maxLength | — |
autocomplete | — |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 区分输入焦点与列表中活动项。
- 说明是否允许列表外自由值。
和相似组件的区别
Combobox 可输入并显示建议；Select 的核心是从现有值中选择。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Svelte / SvelteKit、Solid · 来源核验