sui-multiselect, how to preselect some options in case of multi-select from remote lookup

[deepakgonda]

Bug description:

I am making multiple select using sui-multiselect but since the options list are too heavy (more than 65000 results), I decided to use remote lookup options. All is working fine in case of search and select one option from the list. But I don't get how to preselect some options while initializing the form. Or on some other action on some other element.

Code:

component.html

 <sui-multi-select class="selection" [placeholder]="'Select Organisations' 
   [(ngModel)]="registration.allowed_organisations.organisations" 
   [optionsLookup]="organisationsLookup"
   [labelField]="'name'" [isSearchable]="true" [maxSelected]="100"  #multiSelect>
 <sui-select-option *ngFor="let option of multiSelect.filteredOptions" [value]="option">
 </sui-select-option>
</sui-multi-select>

component.ts

public organisationsLookup = async (query: string) => {
    console.log("Org. QR: " + query);
    if (query) {
      const pr = new Promise<string>(resolve => {
        this.opportunityService.getAutoComplete(query, "Organisation").subscribe(
          data => {
            const organisations = data.data;
            resolve(organisations);
          }
        );
      });
      return pr;
    } else {
      return [];
    }
  };

Version of Angular, ng2-semantic-ui, and Semantic UI:

Angular: 4.4.3

ng2-semantic-ui: 0.9.6

[Deneden]

I tried to solve my similar problem, maybe help to you.
http://plnkr.co/edit/qNwqOVwztbr7GrnlpUoA?p=preview

[NikhilRadadiya]

@deepakgonda did you solve your issue? can you please provide the whole code related to remotelookup?

[edcarroll]

You should be able to do this by making use of the initial parameter of the optionsLookup function. The docs explain how to do this. Let me know if this solves your issue!

[janpapenbrock]

@edcarroll I think I just ran into this issue. If I reproduced it correctly, when you set valueField="" or omit it completely, the optionsLookup is not invoked with initial set. Once I set valueField="title", optionsLookup is invoked (but not with an array of titles, but a list of objects).

So, to be clear:

• if valueField is not blank, optionsLookup function is invoked with initial values (as present in array bound to ngModel)
• if valueField is blank, optionsLookup is not invoked with initial values, hence no values are shown as selected in dropdown

This is my lookup, which is pretty basic (and not hooked up to any API yet. Basically I want it to return an item with the contents the user typed).

  skillsLookup = async (query: string, initial?: Skill[]) => {
    if (initial) {
      console.log('initial', initial);
      return Promise.resolve(initial);
    }
    if (query) {
      const skillForQuery: Skill = new Skill().deserialize({ id: undefined, title: query.toLocaleLowerCase() });
      return Promise.resolve([ skillForQuery ]);
    } else {
      return Promise.resolve([]);
    }
  };

And my template:

          <ng-template let-skill #skillOptionTemplate>
            <span class="skill"><i class="middle book icon"></i> {{ skill.title }}</span>
          </ng-template>

          <sui-multi-select id="skills" name="skills" class="selection"
                            [(ngModel)]="entity.skillInstances"
                            [optionsLookup]="skillsLookup"
                            labelField="title"
                            valueField=""
                            placeholder="Start typing to add skills..."
                            [isSearchable]="true"
                            [isDisabled]="false"
                            [hasLabels]="true"
                            [optionTemplate]="skillOptionTemplate"
                            #multiSelectSkills>
            <sui-select-option *ngFor="let option of multiSelectSkills.filteredOptions"
                               [value]="option"></sui-select-option>
          </sui-multi-select>

[janpapenbrock]

Actually, I found this exact condition in the code here: https://github.com/edcarroll/ng2-semantic-ui/blob/master/src/modules/select/components/multi-select.ts#L201-L205

This condition was introduced when itemsLookup was introduced initially in this commit 854e57e. On first glance I can't seem to see why the condition on valueField is necessary.

Created a pull request here: #421

[marcbernal]

Hi, is this still on a PR ?

Will be very useful to have the initial parameter filled when using the whole object as value (without valueField on the select).

Thanks !

[nagur527]

Yes, I need this option, to allow it to select whole object as value without using valueField parameter.

Thanks