Topic: Including hidden options in search results on a select

Sushrut Bidwai premium asked 1 year ago


Hi,

In a select component, I can set an option to be hidden. The side effect of that is - when the search box is used, filter=true, hidden options are not included in the search results.

Is there a way to include them? I have a select box that can have 80-100 options. For providing better UX, I want to only show top 10 options, visible at all times, and all others hidden, but searchable. Visible options does not work, as rest of the options still show when user scrolled.


Sushrut Bidwai premium answered 1 year ago


@mlazaru which event is fired when search box is being used? keyup/keydown? will be great if you can provide a sample for this.


Mateusz Lazaru staff commented 1 year ago

You have a point. Search does not emit any onChange or similar event. We will discuss the addition of such event in our team as it might be usefull also in other cases.


Sushrut Bidwai premium commented 1 year ago

FWIW This is what I ended up doing, quite hacky.

(function() { const selectEl = document.getElementById('locationSelector');

selectEl.addEventListener('open.mdb.select', (e) => {
    var optionGroup = document.querySelector('.select-option-group');
    let check = function() {
      setTimeout(function () {
        if (optionGroup === null) {
          optionGroup = document.querySelector('.select-option-group');
          check();
      }
        else {
          optionGroup.parentElement.parentElement.classList.add('hide_extra_options_in_select');
        }
      }, 50);
    };
    check();
});    

})(); .hide_extra_options_in_select { overflow-y: hidden !important;}

Basically leave all options as visible, but when the select is open, set overflow-y to hidden so that only top 10 options are visible and there is no scroll bar.


Mateusz Lazaru staff commented 1 year ago

Thank you for sharing your code! I hope we will be able to make it easier soon.


Mateusz Lazaru staff answered 1 year ago


hidden attribute adds d-none class to newly created select-option's. Theoretically, you could create a function to toggle this class depending on the search value for all elements.

Unfortunately, there is no built-in option which would do that automatically.



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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No