подключите службу пользовательского поиска вместо поиска по умолчанию в ng-select - PullRequest
Новая
       71

подключите службу пользовательского поиска вместо поиска по умолчанию в ng-select

0 голосов
/ 09 июля 2020

Я использую библиотеку ng-select в своем проекте angular веб-приложения. Когда пользователь вводит условие поиска в поле поиска, вместо отображения значений путем сопоставления строки я хочу использовать службу поиска, которая возвращает мне значения, принимая строку поиска в качестве ввода. 

<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 

  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, фильтрующий список. Как я могу это сделать?

1 Ответ

0 голосов
/ 10 июля 2020

Мне удалось добиться этого с помощью 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
        }
      }
    );
  }
...