Typeahead with API call in angular [关闭]

【问题标题】：Typeahead with API call in angular [closed]Typeahead with API call in angular [关闭]
【发布时间】：2021-06-27 03:02:14
【问题描述】：

我需要使用 Typeahead 在 app 中添加全局搜索，当用户键入时它应该调用 api 并在下拉列表中显示结果，我是 angular 和 typescript 的新手，如果有任何代码示例，请告诉我。我正在使用 Angular 10 版本

感谢您的帮助

【问题讨论】：

标签： angular typescript bootstrap-4 drop-down-menu typeahead

【解决方案1】：

您可以使用许多库。

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.searching = true),
      switchMap(term =>
        this.tagService.searchByKeyword(this.category, term).pipe(
          tap(() => this.searchFailed = false),
          catchError(() => {
            this.searchFailed = true;
            return of([]);
          }))
      ),
      tap(() => this.searching = false)
    )

<input class="form-control" [placeholder]="placeholder" [(ngModel)]="value" (ngModelChange)="change($event)" [ngbTypeahead]="search" [readonly]="readonly">

类似的东西。

【讨论】：