CODEWITHSUNDEEP
angularautocompletezonezone.jsng2-semantic-ui
Nastya Scherbakova
Nastya Scherbakova

Reputation: 172

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.

Upvotes: 3

Views: 1422

Answers (1)

obenjiro
obenjiro

Reputation: 3760

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>

Upvotes: 0

Related Questions