Autocompletar baseado em jQuery está agora obsoleto

Dev
1

A biblioteca de autocompletar baseada em jQuery chamada através da função $.autocomplete() está agora obsoleta no core do Discourse. Estamos avançando para soluções modernas que oferecem melhor desempenho e abstrações de posicionamento para a funcionalidade de autocompletar.

Guia de Migração

Para autocompletar em textarea (ex: menções, hashtags, emoji)

Use o modificador DAutocomplete introduzido em https://github.com/discourse/discourse/pull/33513.

O modificador oferece a mesma funcionalidade que o plugin jQuery, mas com melhor integração ao sistema de reatividade do Ember e à nossa biblioteca de posicionamento FloatKit.

Outros PRs de referência: DEV: floatkit autocomplete for ai-bot-conversations by tyb-talks · Pull Request #34354 · discourse/discourse · GitHub

Antes:

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

Depois:

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

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

Para autocompletar em campos de entrada (ex: seleção de grupo/usuário)

Use o componente DMultiSelect como demonstrado em UX: overhaul of GroupSelector with Floatkit by tyb-talks · Pull Request #34685 · discourse/discourse · GitHub.

Este componente oferece uma experiência completa de multiseleção com gerenciamento de pesquisa e seleção. A implementação no PR de referência também acomoda um modo de seleção única.

Antes:

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

Depois:

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>

Se você mantém um tema ou plugin que usa o autocompletar jQuery, por favor, migre para as novas soluções. Resolveremos a obsolescência em 10 de novembro de 2025.

Responda abaixo se tiver dúvidas sobre a migração do seu código.

6 curtidas