jQuery-basiertes Autocomplete ist jetzt veraltet

Entwickler
1

Die auf jQuery basierende Autocomplete-Bibliothek, die über die Funktion $.autocomplete() aufgerufen wird, ist in Discourse Core jetzt veraltet. Wir setzen auf moderne Lösungen, die eine bessere Leistung und Positionierungsabstraktionen für die Autocomplete-Funktionalität bieten.

Migrationsleitfaden

Für Textarea-Autocomplete (z. B. Erwähnungen, Hashtags, Emoji)

Verwenden Sie den DAutocomplete-Modifikator, der in https://github.com/discourse/discourse/pull/33513 eingeführt wurde.

Der Modifikator bietet die gleiche Funktionalität wie das jQuery-Plugin, jedoch mit besserer Integration in das reaktive System von Ember und unsere FloatKit-Positionierungsbibliothek.

Weitere Referenz-PRs: DEV: floatkit autocomplete for ai-bot-conversations by tyb-talks · Pull Request #34354 · discourse/discourse · GitHub

Vorher:

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

Nachher:

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

// programmatisch:
DAutocompleteModifier.setupAutocomplete(
  owner,
  textareaElement,
  autocompleteHandler,
  {
    key: "@",
    dataSource: (term) => searchUsers(term),
    template: userTemplate,
    transformComplete: (user) => user.username
  }
);

Für Eingabefeld-Autocomplete (z. B. Gruppen-/Benutzerauswahl)

Verwenden Sie die DMultiSelect-Komponente, wie in UX: overhaul of GroupSelector with Floatkit by tyb-talks · Pull Request #34685 · discourse/discourse · GitHub demonstriert.

Diese Komponente bietet eine vollständige Multi-Select-Erfahrung mit Such- und Auswahlverwaltung. Die Implementierung im Referenz-PR berücksichtigt auch einen Single-Select-Modus.

Vorher:

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

Nachher:

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>

Wenn Sie ein Theme oder Plugin pflegen, das das jQuery-Autocomplete verwendet, migrieren Sie bitte auf die neuen Lösungen. Wir werden die Veralterung am 10. November 2025 aufheben.

Antworten Sie unten, wenn Sie Fragen zur Migration Ihres Codes haben.

6 „Gefällt mir“