连接自定义搜索服务而不是 ng-select 中的默认搜索

Question

我在我的 angular web 应用程序项目中使用 ng-select 库。 当用户在搜索框中输入搜索词时，我不想通过匹配字符串来显示值，而是想使用一个搜索服务，通过将搜索字符串作为输入来返回值。

<ng-select #Selector
           [items]="displayList"
           class="search-icon select-custom"
           bindLabel="displayName"
           notFoundText="No results found. Please try a different search criteria."
           (search) = "onSearch($event)"
           groupBy="type"
           [closeOnSelect]="false"
           (close)="onDropDownClosed()"
           (change)="selectItem(selectedItem)"
           [(ngModel)]="selectedItem">
  <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
    <span class='display-name' [ngOptionHighlight]="search" [title]="item.displayName" *ngIf="!isViewMore(item)">
    {{item.displayName}}
    </span>
    <span class="view-more" *ngIf="isViewMore(item)">
    {{item.displayName}}
    </span>
    <div class='provider-specialty' *ngIf="shouldShowDepartmentName(item)">
      {{getAreasOfExpertise(item)}}
    </div>
  </ng-template>
</ng-select>

这是我的 onSearch function

  onSearch(e) {
    console.log(e)
    this.loadData(e.term)
    this.ngSelectComponent.detectChanges()
  }

private loadData(searchTerm: string) {
    this.searchService.getFindADocList(searchTerm).subscribe(response => {
      this.findADocList = response
      this.flattenList()

    }, () => {

      alert('An error occurred while trying to get find a doc list.')
    })
  }

这似乎不起作用。我需要从服务中获取列表并在用户开始键入而不是 ng-select 过滤列表时更新现有列表。 我怎样才能做到这一点？

Answer 1

我能够在 typeahead 的帮助下实现这一目标。

<ng-select #Selector
           [items]="displayList"
           class="search-icon select-custom"
           bindLabel="displayName"
           notFoundText="No results found. Please try a different search criteria."
           groupBy="type"
           [loadingText]="LOADING_TEXT"
           [loading]="isLoading"
           [closeOnSelect]="false"
           (clear)="clear($event)"
           (close)="onDropDownClosed()"
           (change)="selectItem(selectedItem)"
           [(ngModel)]="selectedItem"
           [typeahead]="input">

在我的组件中，我订阅了我的搜索词更改，如下所示：

  constructor(private searchService: SearchService) {
    this.input.subscribe((newTerm) => {
        if (newTerm && newTerm != null && newTerm.length > 1) {
          this.ngSelectComponent.notFoundText = 'No results found. Please try a different search criteria.'
          this.loadData(newTerm)
        }
        if (!newTerm || newTerm == null || newTerm.length < 2) {
          this.clearItemsFromList();
          this.viewMoreLocations = false
          this.viewMoreProviders = false
          this.viewMoreAreasOfExpertise = false
        }
      }
    );
  }