Can the Menu control support searching/filtering what is displayed?

[KS]

Hello,

I have a question about the Menu component. Would it be possible to dynamically filter the options shown in the menu based on the value of a text box? Essentially, can it support typeahead searching so that a user can filter down a big list of options instead of having to look through the entire menu for what they're looking for?

The use case for this would be something like having a text box the user can type into. When they click the text box, the menu appears below it with all of the options by default. As they start typing, the options in the menu would get filtered based on the text they put in, so users could easily find the selection they want to click rather than having to look through every parent/child to see what they want.

Thank you,

KS

[YuvanShankar Arunagiri]

Hi KS,

We regret for the inconvenience. We can achieve your requirement using the template feature of Menu component. kindly refer to the below demo and UG link.

Demo link: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/menu/template

UG link: https://ej2.syncfusion.com/angular/documentation/menu/data-source-binding-and-custom-menu-items#custom-menu-items

For now, facing issue (not editable) while place the textbox within the menu component.

So, we have confirmed the issue as “Input element is not editable when we placed inside the menu template" and logged a defect report. We will include the fix for this issue in upcoming weekly patch release scheduled for 12th April 2023.

Feedback link: https://www.syncfusion.com/feedback/42469/input-element-is-not-editable-when-we-placed-inside-the-menu-template

You will be informed regarding this once the fix is published.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

KS,

We are glad to announce our weekly patch release (21.1.38) is rolled out. We have included the fix for this “Input element is not editable when we placed inside the menu template” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end (21.1.38).

Feedback link: https://www.syncfusion.com/feedback/42469/input-element-is-not-editable-when-we-placed-inside-the-menu-template

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/21.1.38/?type=all#menu

Using the select and beforeClose event of Menu, we can handle the closing of menu popup and change event of text input, we can filter the menu item shown as below.

onChange(args) {

        var results = this.filterData.filter(x => x.text.toLowerCase().startsWith(args.target.value));

        args.target.value ? this.filteringMenuItems(results) : this.filteringMenuItems([]);

    }

 

    filteringMenuItems(data) {

        let liElem: any = document.querySelector('.e-menu-popup .e-ul').childNodes;

        for (var i = 0; i < liElem.length; i++) {

            liElem[i].classList.remove('e-hidden');

            if (data.length !==0 && liElem[i].ariaLabel !== 'Filter'

                 && !data.some(item => item.id === liElem[i].id)) {

                liElem[i].classList.add('e-hidden');

            }

        }

    }

Sample link: https://stackblitz.com/edit/angular-zmubm6-fusibr?file=src%2Fapp.component.ts

Get back to us if you need any further assistance on this.