Select with filter and option groups

Hello,

Since we don't know whether the user is looking for group or element, we should handle both scenarios:

the option-interface should contain a reference to the group(I use the grp for label since the user can see that even it is redundant).
During filtering I set the g variable to the grp(for item elements) if has any or to label(group elements) and search in g(group or subitems) and l(for items) and set the shown value.So this case the result will show all the element whiches contains the term and all the sublements of the group if the user looked for the group independently from the subelements contain the given term or not.is not acceptable.

Thank you!

If you need some more info to clarify something, reach me out

tano

So I have a hack like this:

 @ViewChildren('medSelect')
    set medSelects(selects: QueryList<SelectComponent>) {
        selects.forEach(s => {
            const ol: OptionList = s.optionList;
            ol.filter = (term: string): boolean => {
                let anyShown = false;
                if (term.trim() === '') {
                    ol.options.forEach(option => {
                        option.shown = true;
                    });
                    anyShown = ol.options.length > 0;
                } else {
                    ol.options.forEach(option => {
                        const l: string = Diacritics.strip(option.label).toUpperCase();
                        // tslint:disable-next-line: no-string-literal
                        const group = option.wrappedOption['grp'];
                        const g: string = group ? Diacritics.strip(group).toUpperCase() : l;
                        const t: string = Diacritics.strip(term).toUpperCase();
                        option.shown = g.indexOf(t) > -1 || l.indexOf(t) > -1;

                        if (option.shown) {
                            anyShown = true;
                        }
                    });
                }

                ol.highlight();
                return anyShown;

            };
        });
    }

Hello.

Glad you found a workaround for now.

We will consider implementing something like that in our select. We currently have some important changes planned for this component, so we don't want to give promises that we might not fulfill.

Could you describe in more detail how such a function would work? For example, whether the search for the given option group label should display all options related to this group?