Search not working in Multiselect Dropdown.

[jackhalfalltrades]

Hi, Please help me in getting the search feature to work. Please find below the configurations and code snippets of my project. Kindly help on this and please let me know if you need more information.

html : <ss-multiselect-dropdown [options]="jobCreateModel.environmentOptions" [texts]="jobCreateModel.selectTextRenderer" [settings]="jobCreateModel.multiSelectEnabler" name="environmentOptionsModel" formControlName="environmentOptionsModel">

Config:

// multiselect drop down behavioural settings multiSelectEnabler: IMultiSelectSettings = { enableSearch: true, showCheckAll: true, showUncheckAll: true, isLazyLoad: true, checkedStyle: 'glyphicon', buttonClasses: 'btn btn-default', dynamicTitleMaxItems: 0, closeOnClickOutside: true, displayAllSelectedText: false, containerClasses: 'dropdown-block' };

// drop down behavioural settings singleSelectEnabler: IMultiSelectSettings = { enableSearch: true, showCheckAll: false, showUncheckAll: false, isLazyLoad: true, checkedStyle: 'glyphicon', buttonClasses: 'btn btn-default', dynamicTitleMaxItems: 1, autoUnselect: true, closeOnClickOutside: true, displayAllSelectedText: false, containerClasses: 'dropdown-block', selectionLimit: 1 };

// dropdown text styles / attributes selectTextRenderer: IMultiSelectTexts = { checkAll: 'Select All', uncheckAll: 'Deselect All', checked: 'Option Selected', checkedPlural: 'Options Selected', searchPlaceholder: 'Search...', searchEmptyResult: 'Nothing found...', searchNoRenderText: 'Type in search box to see results...', defaultTitle: 'Select Options', };

TS:

this.jobCreateModel.setApplicationOptions([ { id: 1, name: 'RSS' }, { id: 2, name: 'REIM' }, { id: 3, name: 'ESP' }, { id: 4, name: 'STH' }, { id: 5, name: 'TSH' }, { id: 6, name: 'IPOS' }, { id: 7, name: 'POS' }, { id: 8, name: 'Cognos' }, { id: 9, name: 'BDP' }, { id: 10, name: 'FMS' }, { id: 11, name: 'OMS' }, { id: 12, name: 'ECM' } ]);

Renderer:

After entering the search string:

[thebf]

If you put it in a plunkr I'll have a look to see if I can catch the cause.

[jackhalfalltrades]

I am sorry to ask, i am new to this. Can you let me know what is the plunker ?

Thanks & Regards Peravelli

On Wed, Nov 29, 2017 at 2:26 PM, Magnus Falch notifications@github.com wrote:

If you put it in a plunkr I'll have a look to see if I can catch the cause.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/softsimon/angular-2-dropdown-multiselect/issues/339#issuecomment-347985505, or mute the thread https://github.com/notifications/unsubscribe-auth/AMqbY4S_9Rs3hlIfhmLKtQPuy30WoTNCks5s7b3agaJpZM4Qvf42 .

[thebf]

https://plnkr.co/edit/BbZ4C4KWxdR4QJHUGMiW?p=preview

I forked this one for you. So far I can tell that the option causing the issue is "isLazyLoad: true," Will check further.

Click the fork button and adapt it with the same options that you have. If the issue can be replicated there your chance of someone being able to help you and taking the time to do so increases by a lot.

[thebf]

@GregKass Correct me if I'm wrong but when lazy loading, the local filter is short-circuited and handled separately in the external data source meaning that a lazy-load of a local options object would not work when isLazyLoad is set to true?

Relevant lines from your commit added below.

` this.filteredOptions = this.applyFilters(this.options, this.settings.isLazyLoad ? '' : this.filterControl.value);

load() { this.onLazyLoad.emit({ length: this.options.length, filter: this.filterControl.value, checkAllSearches: this.checkAllSearchRegister, checkAllStatus: this.checkAllStatus });`

[GregKass]

@thebf That is correct. When you use lazy loading, you are pulling a specific number, N, of the results at a time. If you were to filter those results after loading, you have the potential to return anywhere from N of the results to none of the results. Instead, the onLazyLoad event passes the search filter for you to use in the back-end request to pull N matching results. The Lazy Loading plunker example demonstrates this as well.

[thebf]

@peravelli Have a look at this one: https://plnkr.co/edit/WDkgy3oaehsBNZ0bphth?p=preview Your data is moved into the in-memory-data.service.ts file. Look at the loading code and the promises, also: (onLazyLoad)="loadData($event)" in the html element. If you actually want lazy loading, you need to base your approach around this approach. Though the amount of data that you have in your example is not really a good candidate for lazy loading as the gain of segmenting the data being rendered is too little compared to the amount of extra work involved.

[jackhalfalltrades]

@thebf Thanks a Ton, i understood the issue, it was as you said the lazy load option. I will try to use the approach suggested in the plunker. Thanks a lot. Really appreciate your help. Cheers!!!!

[thebf]

@peravelli I think you might have misunderstood, the plunker was meant to demonstrate that it works when needed. With less than 100 i would just do the solution closer to this without lazy loading: https://plnkr.co/edit/BbZ4C4KWxdR4QJHUGMiW?p=preview

Don't default to the heavy path if you don't really need it.

[GregKass]

@peravelli I also want to check in to make sure that you understand that the angular-in-memory-web-api in the Plunker example is only meant to be used in development as a back-end service simulator. It does not take the place of a back-end service in a production app.

[flavio-henrique]

Hello, how can I set or change the class of the search icon?