jQuery-based autocomplete ahora está obsoleto

Desarrollador
1

La biblioteca de autocompletado basada en jQuery llamada a través de la función $.autocomplete() ahora está obsoleta en el núcleo de Discourse. Estamos avanzando hacia soluciones modernas que brindan un mejor rendimiento y abstracciones de posicionamiento para la funcionalidad de autocompletado.

Guía de migración

Para autocompletado en textareas (por ejemplo, menciones, hashtags, emoji)

Utilice el modificador DAutocomplete introducido en https://github.com/discourse/discourse/pull/33513.

El modificador proporciona la misma funcionalidad que el plugin de jQuery pero con una mejor integración en el sistema de reactividad de Ember y nuestra biblioteca de posicionamiento FloatKit.

Otras PR de referencia: 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
});

Después:

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

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

Para autocompletado en campos de entrada (por ejemplo, selección de grupo/usuario)

Utilice el componente DMultiSelect como se demuestra en UX: overhaul of GroupSelector with Floatkit by tyb-talks · Pull Request #34685 · discourse/discourse · GitHub.

Este componente proporciona una experiencia completa de selección múltiple con gestión de búsqueda y selección. La implementación en la PR de referencia también se adapta a un modo de selección única.

Antes:

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

Despué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 mantiene un tema o plugin que utiliza el autocompletado de jQuery, migre a las nuevas soluciones. Resolveremos la obsolescencia el 10 de noviembre de 2025.

Responda a continuación si tiene preguntas sobre la migración de su código.

6 Me gusta