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