Créer un système d'autocomplétion avec un pipe personnalisé

Pour créer un pipe sur Angular pour faire de l'autocompletion sur une liste d'utilisateurs, vous devez d'abord créer un nouveau pipe en utilisant la commande Angular CLI suivante :

ng generate pipe autocomplete

Cela créera un nouveau fichier appelé "autocomplete.pipe.ts" dans votre projet, contenant le squelette d'un pipe Angular. Vous pouvez ensuite ajouter votre logique d'autocompletion dans la méthode transform du pipe, comme ceci :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'autocomplete',
  standalone: true
})
export class AutocompletePipe implements PipeTransform {
  transform(users: string[], value: string): string[] {
    return users.filter(user => user.toLowerCase().includes(value.toLowerCase()));
  }
}

Dans cet exemple, la méthode transform filtre la liste d'utilisateurs en ne retournant que les utilisateurs dont le nom contient la chaîne de caractères fournie en entrée. Vous pouvez remplacer cette logique par toute autre logique que vous souhaitez utiliser pour effectuer l'autocompletion.

Une fois que vous avez terminé de définir votre pipe "autocomplete" personnalisé, vous devez l'inclure dans votre modèle en ajoutant l'annotation "Pipe" et en spécifiant le nom du pipe ("autocomplete") comme suit :

import { Component } from '@angular/core';
import { AutocompletePipe } from './autocomplete.pipe';

@Component({
  selector: 'app-my-component',
  template: `
    <ul>
      @for (user of myUsersList | autocomplete:mySearchString ; track $index) {
        <li>{{ user }}</li>
      }
    </ul>
  `,
  imports: [AutocompletePipe],
  standalone: true
})
export class MyComponent {}

Une fois que vous avez fait cela, vous pouvez utiliser le pipe "autocomplete" dans votre vue (template) en l'appliquant à une chaîne de caractères contenant une portion du nom d'un utilisateur, ainsi qu'à la liste complète des utilisateurs, en utilisant la syntaxe suivante :

{{ mySearchString | autocomplete:myUsersList }}

Cela affichera uniquement les utilisateurs dont le nom contient la chaîne de caractères fournie en entrée, en utilisant la logique d'autocompletion définie dans la méthode transform du pipe.