Topic: Select with filter and option groups
tano pro asked 5 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 5 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 5 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 5 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;
};
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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