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

apps/demo/main.ts

@@ -10,6 +10,7 @@ const IMG_DEMO = 'data:image/svg+xml;utf8,' + encodeURIComponent(
 import {
   accordion,
   alert,
+  autoComplete,
   avatar,
   badge,
   breadcrumb,
@@ -185,6 +186,7 @@ const listPick = signal(''); // 列表点击选中的条目标题
 const slideIndex = signal(0); // 轮播当前下标（外部受控演示）
 const cascaderPath = signal<string[]>(['east', 'sh']); // 级联选择路径（外部受控演示）
 const splitSizes = signal<number[]>([35, 65]); // 分栏比例（外部受控演示）
+const acValue = signal(''); // 自动补全输入值（外部受控演示）
 const treePick = signal('core'); // 树形选中节点 key
 const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合（外部受控演示）
 const cityPick = signal(''); // 可搜索下拉的选中城市
@@ -681,6 +683,31 @@ const content = h(
       button({ label: '错误（可关）', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500，请稍后重试', variant: 'danger' }) }),
     ),
   ),
+  section(
+    'sec-autocomplete',
+    '自动补全',
+    'autoComplete：输入即过滤候选，↑↓ 环形高亮 / Enter 选中 / Esc 收起；options 传函数可做远程联想，空结果给提示行。',
+    h(
+      'div',
+      { class: 'row' },
+      autoComplete({
+        value: acValue,
+        placeholder: '输入组件名，如 table',
+        emptyText: '没有匹配的组件',
+        onSelect: (o) => toast.success(`已选 ${o.value}`),
+        options: [
+          { value: 'dataTable', hint: '表格' },
+          { value: 'transfer', hint: '穿梭框' },
+          { value: 'cascader', hint: '级联' },
+          { value: 'splitter', hint: '分栏' },
+          { value: 'autoComplete', hint: '联想' },
+          { value: 'pagination', hint: '分页' },
+        ],
+      }),
+      autoComplete({ placeholder: '按关键字动态算候选', options: (q) => [{ value: `${q}-alpha` }, { value: `${q}-beta` }] }),
+      h('span', { class: 'out' }, () => (acValue() ? `输入框当前值：${acValue()}` : '未输入')),
+    ),
+  ),
   section(
     'sec-splitter',
     '可拖拽分栏',