Topic: Select with filter and option groups

tano pro asked 4 years ago


I have an mdb-select with filterenabled and option groups. If I filter for a group the nested items disappear. The filter should handle group filtering or a possiblity to add custom filtering(like compareWith) would be good to handle it by myself. I know it is a little bit tricky to handle this kind of filtering, I will add the groupname to every child and the filter will look at both the label and groupname to get the good result.

Thank you!

tano


tano pro answered 4 years ago


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


Arkadiusz Idzikowski staff answered 4 years ago


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?


tano pro answered 4 years ago


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;

            };
        });
    }


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No