diff --git a/.agents/migration_plan_autocomplete.md b/.agents/migration_plan_autocomplete.md
index b153779a8..95b04a573 100644
--- a/.agents/migration_plan_autocomplete.md
+++ b/.agents/migration_plan_autocomplete.md
@@ -45,21 +45,22 @@
### Step 1: 迁移属性名称自动补全 ✅ 完成
**文件变更:**
-- `apps/client/src/services/attribute_autocomplete.ts` — `initAttributeNameAutocomplete()` 支持双 API:传 `container` 走新库,传 `$el` 走旧库
-- `apps/client/src/widgets/attribute_widgets/attribute_detail.ts` — 属性名称输入框从 `` 改为 `
` 容器,值读写改用 `getInputValue()/setInputValue()`
-- `apps/client/src/stylesheets/style.css` — 添加新库 CSS(隐藏搜索图标、样式对齐)
-- `RelationMap.tsx` — **不变**,继续用旧 `$el` API
+- `apps/client/src/services/attribute_autocomplete.ts` — 将 `initAttributeNameAutocomplete()` 完全使用 **Headless API (`@algolia/autocomplete-core`)** 重写,移除遗留的 jQuery autocomplete 调用。
+- `apps/client/src/widgets/attribute_widgets/attribute_detail.ts` — 维持原有 `` 模型不变,仅需增加 `onValueChange` 处理回调。
+- `apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx` — 维持原有回调逻辑,新旧无感替换。
+- `apps/client/src/stylesheets/style.css` — 增加自定义 Headless 渲染面板样式 (`.aa-core-panel`,`.aa-core-list` 等)。
-**说明:**
-`initAttributeNameAutocomplete()` 同时支持新旧两种调用方式(overloaded interface),让消费者可以逐步迁移:
-- `attribute_detail.ts` 传 `{ container }` → 使用 `autocomplete-js`
-- `RelationMap.tsx` 传 `{ $el }` → 使用旧 `autocomplete.js`
-- RelationMap 的迁移推迟到后续步骤(因为它的 prompt dialog 由 React 管理 input)
+**架构说明:**
+由于 Trilium 依赖同一页面同时运行多个 autocomplete 生命周期(边栏属性列表,底部编辑器等),原生 `@algolia/autocomplete-js` 会因为单例 DOM 冲突强行报错 "doesn't support multiple instances running at the same time"。
+解决方案是退化使用纯状态机的 `@algolia/autocomplete-core`,自己进行 DOM 劫持与面板渲染。
+- `requestAnimationFrame`:针对下拉层自动跟踪光标位置,适配面板的高频大小变化
+- 事件阻断:拦截了选择时候的 `Enter` 返回键事件气泡,避免误触外层 Dialog 销毁。
**验证方式:**
-- ⬜ 打开一个笔记 → 点击属性面板 → 点击属性名称输入框 → 应能看到自动补全的属性名称列表
-- ⬜ 选择一个名称后,值应正确填入
-- ⬜ 关系图创建关系时,关系名输入框的自动补全仍正常(旧库路径)
+- ✅ 打开一个笔记 → 点击属性面板弹出 "Label detail" → 输入属性名称时正常显示下拉自动补全框
+- ✅ 放大/缩小/变形整个面板,下拉菜单粘连位置准确
+- ✅ 键盘上下方向键可高亮,按 Enter 可选中当前项填充,且对话框不关闭
+- ✅ 关系图 (Relation map) 创建关系时,关系名输入框的自动补全同样工作正常
---
diff --git a/apps/client/src/services/attribute_autocomplete.ts b/apps/client/src/services/attribute_autocomplete.ts
index 2910074d8..0fbf78ec2 100644
--- a/apps/client/src/services/attribute_autocomplete.ts
+++ b/apps/client/src/services/attribute_autocomplete.ts
@@ -18,8 +18,6 @@ interface InitAttributeNameOptions {
open: boolean;
/** Called when the user selects a value or the panel closes */
onValueChange?: (value: string) => void;
- /** (Deprecated) Kept for compatibility during migration, not used anymore */
- useNewLib?: boolean;
}
// ---------------------------------------------------------------------------
@@ -34,15 +32,6 @@ interface ManagedInstance {
const instanceMap = new WeakMap();
-function destroyInstance(el: HTMLElement): void {
- const inst = instanceMap.get(el);
- if (inst) {
- inst.cleanup();
- inst.panelEl.remove();
- instanceMap.delete(el);
- }
-}
-
// ---------------------------------------------------------------------------
// Dropdown panel DOM helpers
// ---------------------------------------------------------------------------
diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
index c96974d1a..08aa6c4f0 100644
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -379,7 +379,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
$el: this.$inputName,
attributeType: () => (["relation", "relation-definition"].includes(this.attrType || "") ? "relation" : "label"),
open: true,
- useNewLib: true,
onValueChange: () => this.userEditedAttribute(),
});
});
diff --git a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
index eca3c4218..867fd44d3 100644
--- a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
+++ b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
@@ -432,8 +432,7 @@ function useRelationCreation({ mapApiRef, jsPlumbApiRef }: { mapApiRef: RefObjec
attribute_autocomplete.initAttributeNameAutocomplete({
$el: $answer,
attributeType: "relation",
- open: true,
- useNewLib: true
+ open: true
});
}
});