Попытка реализовать автозаполнение с помощью ng2-semantic-ui select. Данные поступают с API-адреса в формате JSON - PullRequest
Новая
       8

Попытка реализовать автозаполнение с помощью ng2-semantic-ui select. Данные поступают с API-адреса в формате JSON

0 голосов
/ 02 ноября 2018

HTML: 

        <sui-select *ngSwitchCase="'8'"
            class="selection"            
                [formControlName]="q.sFieldName"
                [id]="q.sFieldName"
                (selectedOptionsChange)="exportchange($event)"
                [optionsLookup]="libsLookUp"
               [optionFormatter]="lib_formatter"
               labelField="sDisplay"
                valueField="iValue"
                [isSearchable]="true"
                #gitLibSelector
              >

              <sui-select-option *ngFor="let o of filterTheOptions(gitLibSelector.filteredOptions, q.iControlType)" [value]="o"></sui-select-option>
              </sui-select>

Файл TS: 

ngOnDestroy() {
    if (this.sub === undefined) {
      return;
    }
    this.sub.unsubscribe();
  }

  libsLookUp = async (query: string, initial: number) =>  {
    if (query.length > 0) {

        return this.gitLibsByText(query).map(
          res => res.response
        ).toPromise();
      }

    return new Promise<any[]>(resolve => setTimeout(() => resolve([]), 500));
  }


  lib_formatter(option: any, query?: string): string {
    // console.log(option);
    return option.sDisplay;
  }

  gitLibsByText(query: string): Observable<any> {

    const link = 'http://192.168.1.201:8080/staffing/webapi/entity/getEntitySpinner/'+this.spinnerID+'/1/0/'+query+'/0/10';
    // https://api.github.com/search/repositories?q=
    console.log(link);
    return this._http.get(link, {
      observe: 'body',
      responseType: 'json'
    });
  }

  exportchange(event: any) {
    console.log(event);
  }

  filterTheOptions(options: any[], spinnerID : number): any[] {
    this.spinnerID = spinnerID;
     return options;
  }

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

Может извлекать данные и отображать их при вводе, но сервер вызывается при каждом щелчке.

Я хочу получить данные с сервера и затем автозаполнить эти данные. Если значение не присутствует в этих данных, я хотел бы отозвать сервер для получения дополнительных значений.

Код образца Stackblitz: https://stackblitz.com/edit/ng2-semantic-ui-select-resolved?file=app%2Fapp.component.ts

...