Le complétion automatique basée sur jQuery est maintenant dépréciée

Dev
1

La bibliothèque d’autocomplétion basée sur jQuery, appelée via la fonction $.autocomplete(), est maintenant obsolète dans le cœur de Discourse. Nous nous orientons vers des solutions modernes qui offrent de meilleures performances et des abstractions de positionnement pour la fonctionnalité d’autocomplétion.

Guide de migration

Pour l’autocomplétion dans les zones de texte (par exemple, mentions, hashtags, emoji)

Utilisez le modificateur DAutocomplete introduit dans https://github.com/discourse/discourse/pull/33513.

Le modificateur offre la même fonctionnalité que le plugin jQuery, mais avec une meilleure intégration dans le système de réactivité d’Ember et notre bibliothèque de positionnement FloatKit.

Autres PR de référence : DEV: floatkit autocomplete for ai-bot-conversations by tyb-talks · Pull Request #34354 · discourse/discourse · GitHub

Avant :

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

Après :

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

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

Pour l’autocomplétion dans les champs de saisie (par exemple, sélection de groupe/utilisateur)

Utilisez le composant DMultiSelect comme démontré dans UX: overhaul of GroupSelector with Floatkit by tyb-talks · Pull Request #34685 · discourse/discourse · GitHub.

Ce composant offre une expérience complète de sélection multiple avec gestion de la recherche et de la sélection. L’implémentation dans la PR de référence permet également un mode de sélection unique.

Avant :

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

Après :

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>

Si vous maintenez un thème ou un plugin utilisant l’autocomplétion jQuery, veuillez migrer vers les nouvelles solutions. Nous résoudrons l’obsolescence le 10 novembre 2025.

Répondez ci-dessous si vous avez des questions sur la migration de votre code.

6 « J'aime »