angularautocompletezonezone.jsng2-semantic-ui

remote options loading in select using ng2-semantic-ui not working

public optionsLookup(query:string, initial:any): Promise<any> {

      return new Promise (
        (resolve, reject) => /*[{ id: 1, name: 'ololo1'}, { id: 2, name: 'ololo2'}]*/
          this.apiService.get('private/countries', query)
          .then(res => resolve(res))


      );

  }
<sui-multi-select class="selection" [class.default]="false" [name]="fields[key].name" placeholder="{{fields[key].label}}" *ngIf="fields[key].type==fieldTypes.Tag" [(ngModel)]="fields[key].value" [options]="fields[key].options" labelField="{{fields[key].labelField}}" valueField="id"
                [isSearchable]="true" #multiSelect (blur)="saveField(fields[key].name)" [formControlName]="fields[key].name" [optionsLookup]="optionsLookup" [title]="fields[key].label" [hasLabels]="true">
                <sui-select-option *ngFor="let option of multiSelect.filteredOptions" [value]="option">
                </sui-select-option>
            </sui-multi-select>

I tried to use [optionsLookup] but can't figure out how to make it work, so I wrote my own function. But after zone.js finishing this task th placeholder is shown.

enter image description here

Please, help me to fix this or give an short example how to use optionsLookup.

Solution 

  • import { Component } from '@angular/core';
import { LookupFn } from 'ng2-semantic-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value;

  lookupFn(query: string, initial: any) {
    //replace with code that search using query and returns result
    return Promise.resolve([{ id: 1, name: '1' }, { id: 2, name: '2' }]);
  }
}
    <sui-multi-select class="selection"
  [(ngModel)]="value"
  valueField="id"
  labelField="name"
  [optionsLookup]="lookupFn"
  [isSearchable]="true"
  #searchSelect>
  <sui-select-option
    *ngFor="let option of searchSelect.filteredOptions"
    [value]="option">
  </sui-select-option>
</sui-multi-select>