Библиотека ngx-bootstrap предоставляет ряд мощных компонентов пользовательского интерфейса для приложений Angular. Одним из таких компонентов является Typeahead, который позволяет пользователям осуществлять поиск и выбирать параметры из заранее определенного списка. В этой статье мы рассмотрим различные методы добавления списка записей для поиска в Typeahead ngx-bootstrap, сопровождаемые примерами кода.

Метод 1: использование локального источника данных
В этом методе мы будем использовать локальный источник данных для заполнения параметров ввода и отображения списка найденных записей. Вот пример:

// HTML Template
<input type="text" [(ngModel)]="selectedItem" [typeahead]="dataSource" [typeaheadOptionsLimit]="8">
// Component
export class MyComponent {
  selectedItem: string;
  dataSource: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  searchRecords(query: string): string[] {
    // Implement your search logic here, returning matching records
  }
}

Метод 2: использование вызова API
Если вы хотите динамически получать данные из API, вы можете реализовать вызов API для получения списка искомых записей. Вот пример использования оператора RxJS debounceTimeдля задержки вызова API:

// HTML Template
<input type="text" [(ngModel)]="selectedItem" [typeahead]="searchRecords.bind(this)" [typeaheadOptionsLimit]="8">
// Component
import { HttpClient } from '@angular/common/http';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
export class MyComponent {
  selectedItem: string;
  constructor(private http: HttpClient) {}
  searchRecords(query: string): Observable<string[]> {
    return this.http.get<string[]>(`/api/records?q=${query}`).pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((response) => of(response))
    );
  }
}

Метод 3: настройка шаблонов печатного текста
Вы можете дополнительно улучшить список искомых записей, настроив шаблоны печатного текста. Вот пример:

// HTML Template
<input type="text" [(ngModel)]="selectedItem" [typeahead]="dataSource" [typeaheadOptionsLimit]="8">
<ng-template #rt let-r="result" let-t="template">
  <span>{{ r }}</span>
  <div *ngIf="t">{{ t }}</div>
</ng-template>
// Component
export class MyComponent {
  selectedItem: string;
  dataSource: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
}

В этой статье мы рассмотрели несколько способов добавления списка записей для поиска в ngx-bootstrap Typeahead. Мы рассмотрели использование локального источника данных, вызов API и настройку шаблонов Typeahead. Эти методы предоставляют гибкие возможности для реализации эффективных и удобных функций поиска. Используя мощный компонент Typeahead ngx-bootstrap, вы можете повысить удобство работы с приложениями Angular.