Устаревание и предстоящее удаление автодополнения на основе jQuery

Разработка
1

Библиотека автодополнения на основе jQuery, вызываемая через функцию $.autocomplete(), теперь устарела в ядре Discourse. Мы переходим к современным решениям, обеспечивающим лучшую производительность и абстракции позиционирования для функционала автодополнения.

Руководство по миграции

Для автодополнения в текстовых полях (например, упоминания, хэштеги, эмодзи)

Используйте модификатор DAutocomplete, представленный в DEV: floatkit autocomplete for d-editor by tyb-talks · Pull Request #33513 · discourse/discourse · GitHub.

Модификатор предоставляет тот же функционал, что и плагин 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
  }
);

Для автодополнения в полях ввода (например, выбор группы/пользователя)

Используйте компонент DMultiSelect, как показано в UX: overhaul of GroupSelector with Floatkit by tyb-talks · Pull Request #34685 · discourse/discourse · GitHub.

Этот компонент обеспечивает полный опыт множественного выбора с управлением поиском и выбором. Реализация в эталонном 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="Выберите группы"
>
  <:selection as |group|>
    {{group.name}}
  </:selection>
  <:result as |group|>
    {{group.name}}
  </:result>
</DMultiSelect>

Если вы поддерживаете тему или плагин, использующие jQuery autocomplete, пожалуйста, мигрируйте на новые решения. Мы удалим устаревание 10 ноября 2025 года.

Ответьте ниже, если у вас возникнут вопросы по миграции вашего кода.

7 лайков
Locations Plugin :earth_africa: