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

Question

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.

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

Welcome to Stack Overflow. Please review https://stackoverflow.com/help/how-to-ask to learn some details about the expected format of questions on the site. — Vikas, Mar 20 '18 at 17:09
Look at this example http://embed.plnkr.co/VKEXH6fy1QWuq85U1ZpZ/ — Alex Po, Mar 23 '18 at 16:49

score 0 · Accepted Answer · answered Mar 21 '18 at 13:05

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>

thank you, it's working, but not with remoute api (or I wrote something wrong): look at the code snippet — Nastya Scherbakova, Mar 21 '18 at 15:59

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

1 Answers1