using ngx-select-ex with api data

[Aarti5391]

Hi,

I am looking at multi select examples over internet and most of I found displays options drop down as soon as I start typing in search. But I needed a functionality where options drop down gets displayed only after user typed 3 characters in search text box. So each time user types/searches I needed to pass that 3 character string to api to bring the results and then options drop down should display only those results.

I have tried to use typed event and in that event I am checking if length of search string is greater than 3 , then only make the server api call with search string as input and bind the results with items property. But it does not look like working.

Can you please post a exmple on how to bind to items property with async data and only display options drop down after 3 characters typed in text box.

Thanks in advance.

[optimistex]

@Aarti5391 Try this the "Lazy load" example: https://stackblitz.com/edit/ngx-select-ex-issues-50?embed=1&file=app/app.component.ts It waits 2 seconds and provides some data.

[Aarti5391]

Hi,

Thank you for the example. I have implemented same example in my project to see how it work and found out this is not what I am looking for. In this example options drop down opens with delay but does not wait for user input. i.e. in multiselect and autocomplete text box , user will search for the data. Once user started typing in , there will be no options drop down unless user types in search string with length 3 which will be user input. every time user types in to the search text box , there will be different items/response data to bind it to options drop down depending on user input.

We have used angular JS's Ui-select and ui-select-chioces to achieve the given functionality where Ui-select-chioces uses pipes to flter the data as per user input and displays options drop down accordingly.

I hope it makes sense.

Thanks much

[Aarti5391]

I missed to mention that we are migrating from angualr js to angular 5 and needed to find something similar to ui-select and ui-select-chioces in angular 5.

Thanks

[optimistex]

Look at the example for your case. The example still shows the dropdown by input just one symbol. But the code will load some data only if inputted at least 3 symbols. I think it solves the real trouble.

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
    selector: 'app-example',
    template: `<ngx-select [items]="['111', '222']" 
                         [formControl]="selectControl"  
                         (typed)="searchTyped.next($event)"></ngx-select>`
})
class ExampleComponent {
    public items = [];
    public selectControl = new FormControl();
    public searchTyped = new BehaviorSubject<string>('');

    constructor() {
        this.selectControl.valueChanges.subscribe(value => console.log(value));
        searchTyped
            .debounceTime(500)
            .distinctUntilChanged()
            .filter((str: string) => str.length > 2)
            .subscribe((str) => this.loadItemsByRestApi(str));
    }
}

[Aarti5391]

Hi,

Thanks much for the example. It works for me but partially. With this code , it works first time where I do not see options drop down unless I get 3 symbols as search string , But once I get the options drop down after typing 3 symbols (i.e. binding the filtered items to items property which was set to empty array initially) , if I do delete/backspace one of the symbol , I still see options drop down which I should not see.

Requirement is Options drop down should never be displayed for 0, 1 or 2 symbols.

Also with this code , Once I type in 3 symbols and select one of the option from drop down , If I choose another filtered item from same list then it allows me to select it But as soon as I delete all those 3 symbols and start searching for some other sting , It brings me the new options list but at the same time , selected items from earlier list gets removed.

e.g let's say initially I searched for "opt", it brought up "option1" and "option2" and I select "option1" , Now either I remove the letter "t" or entire string "opt", It still shows me the options drop down with "option1" and "option2" which it should not as filter should happen only after 3 symbols and another thing it does , if I remove all 3 "opt" symbols and enter some different string which has different data to load lets say "select1" and "select2" , all the selected items from first loaded list gets removed.

here is the code I have

<ngx-select [autoClearSearch]="true" [multiple]="true" [items]="otws" optionValueField="Key" optionTextField="Value" [(ngModel)]="selOtw" placeholder="Select OTW Individual"
(typed)="searchTyped.next($event)" >
In component.ts file

public otws: OtwContact[]; public selOtw: string[]; public searchTyped = new BehaviorSubject('');

constructor(private advanceSearchService:AdvanceSearchService) { this.searchTyped .debounceTime(500) .distinctUntilChanged() .filter((str: string) => str.length >= 3) .subscribe((str) => this.GetOtwContacts(str)); // this.GetOTWContacts method subscribes to http get }

Thanks,

[optimistex]

@Aarti5391 I did new one example right for your task: https://stackblitz.com/edit/ngx-select-ex-issues-83?embed=1&file=app/app.component.ts It hides options by CSS. Try to write opt

It uses this documentation's part: https://github.com/optimistex/ngx-select-ex#styles-and-customization

[Aarti5391]

Hi,

Thank you for the new example. Hiding with css works but as I mentioned in my earlier post , if I search for another string which brings altogether different result set than previous search result set , then all selected items from previous result set gets removed.

Thanks

[optimistex]

You have to work with loading a new data. You may use one of the technics:

• Store early loaded data, load new, merge it and set to the select component.
• store only selected items, load a new data, merge stored selected items into new data and set it to the component.

[pranaymishra]

This is what you are looking for: https://stackblitz.com/edit/ng2-semantic-ui-select-resolved?file=app%2Fapp.component.ts

[pixar634]

`

                                            <ngx-select 
                                            [items]="specialization_list" [(ngModel)]="specializationDrop" [ngModelOptions]="{standalone: true}"
                                            optionValueField="specializationID" optionTextField="name" [multiple]="true"
                                            (select)="specializationChanged($event, 'add')" (remove)="specializationChanged($event, 'delete')"
                                            placeholder="Select Specialization" [defaultValue]="prevSelected"
                                            >                                                

                                        </ngx-select>

                                        </div>`

@optimistex : hello, this is my code in the form group, now what i want to do is, show the data, from the api that the user has already been assigned to. Suppose, while submitting the form, user selected "A" and "B" from the dropdown,and it gets saved in the database. Now when the user wants to update this profile, "A" and "B" should already show up as selected.