Autocomplete

Campo de texto que filtra una lista mientras escribes, sin distinguir mayúsculas ni tildes («jose» encuentra «José»), y resalta lo que coincide. Hay que elegir una opción de la lista: el texto que no se elige se marca como error al salir. Flechas para moverse, Intro para elegir, Alt+↓ abre la lista entera y Escape cierra (un segundo Escape borra). La lista va en la capa superior, así que nada la recorta.

Angular

Vue

Beneficiario

Elegido: nadie

<flt-autocomplete [options]="beneficiaries" label="Beneficiario" required [(value)]="chosen" />

beneficiaries = [
  { value: 'ana', label: 'Ana Pérez', description: 'ES12 •••• 4821' },
  ...
];

<FltAutocomplete v-model="chosen" :options="beneficiaries" label="Beneficiario" required />

Búsqueda en el servidor

Con mode «server», el campo emite search cuando hay al menos 2 caracteres y dejas de teclear 300 ms, y muestra las opciones que le devuelven. Aquí el «servidor» tarda 0,6 s; mientras tanto se anuncia «Buscando…».

Angular

Vue

Beneficiario (búsqueda en el servidor)

Elegido: nadie

<flt-autocomplete [options]="options()" [loading]="loading()" mode="server"
  label="Beneficiario" [(value)]="chosen" (search)="onSearch($event)" />

// Sin Promises: la búsqueda llega por (search) y la respuesta vuelve por options y loading.
onSearch(term: string) {
  this.loading.set(true);
  this.api.beneficiaries(term).subscribe((options) => {
    this.options.set(options);
    this.loading.set(false);
  });
}

<FltAutocomplete v-model="chosen" :options="options" :loading="loading" mode="server"
  label="Beneficiario" @search="onSearch" />