jQuery驱动的自动完成功能现已弃用

开发
1

Discourse 核心中通过 $.autocomplete() 函数调用的基于 jQuery 的自动完成库现已弃用。我们正转向提供更好的性能和定位抽象的现代化解决方案，以实现自动完成功能。

迁移指南

对于文本区域自动完成（例如，提及、标签、表情符号）

请使用 https://github.com/discourse/discourse/pull/33513 中引入的**DAutocomplete 修饰符**。

该修饰符提供与 jQuery 插件相同的功能，但与 Ember 的响应式系统和我们的 FloatKit 定位库集成得更好。

其他参考 PR：DEV: floatkit autocomplete for ai-bot-conversations by tyb-talks · Pull Request #34354 · discourse/discourse · GitHub

之前：

$(textarea).autocomplete({
  key: "@",
  dataSource: (term) => searchUsers(term),
  template: userTemplate,
  transformComplete: (user) => user.username
});

之后：

import DAutocompleteModifier from "discourse/modifiers/d-autocomplete";

// 以编程方式：
DAutocompleteModifier.setupAutocomplete(
  owner,
  textareaElement,
  autocompleteHandler,
  {
    key: "@",
    dataSource: (term) => searchUsers(term),
    template: userTemplate,
    transformComplete: (user) => user.username
  }
);

对于输入字段自动完成（例如，组/用户选择）

请使用 UX: overhaul of GroupSelector with Floatkit by tyb-talks · Pull Request #34685 · discourse/discourse · GitHub 中演示的**DMultiSelect 组件**。

该组件提供完整的选择体验，包括搜索和选择管理。参考 PR 中的实现也支持单选模式。

之前：

$("input.group-selector").autocomplete({
  dataSource: (term) => searchGroups(term),
  template: groupTemplate
});

之后：

import DMultiSelect from "discourse/components/d-multi-select";

<DMultiSelect
  @selection={{this.selectedGroups}}
  @loadFn={{this.searchGroups}}
  @onChange={{this.handleChange}}
  @label="Select groups"
>
  <:selection as |group|>
    {{group.name}}
  </:selection>
  <:result as |group|>
    {{group.name}}
  </:result>
</DMultiSelect>

如果您维护使用 jQuery 自动完成的主题或插件，请迁移到新的解决方案。我们将在2025 年 11 月 10 日解决此弃用问题。

如果您对迁移代码有任何疑问，请在下方回复。

6 个赞