时间戳

首页 > 解决方案 > 带角度 API 调用的 Typeahead

angular - 带角度 API 调用的 Typeahead

问题描述

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

谢谢你的帮助

标签： angulartypescriptbootstrap-4drop-down-menutypeahead

解决方案

您可以使用许多库。

  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">

像这样的东西。

推荐阅读