Topic: Autofocus search input field when opening material_select with search

slawa pro asked 5 years ago

To focus the search automatically so the user can start typing right away you can add few lines of code.

The mdb-select code is in the module "material-select.js", modify $newSelect.on like this:

    focus: function focus() {
        if ($('').not(options[0]).is(':visible')) {
        if (!':visible')) {
            $(this).trigger('open', ['focus']);
            var _label = $(this).val();
            var selectedOption = options.find('li').filter(function () {
                return $(this).text().toLowerCase() === _label.toLowerCase();
            activateOption(options, selectedOption);
    click: function click(e) {
The added lines are:
Here is the HTML example:

<select class="mdb-select" searchable="Search">
 <option value="" disabled selected>Select country</option>
 <option value="AD">Andorra</option>
 <option value="AE">United Arab Emirates</option>
 <option value="AF">Afghanistan</option>

slawa pro commented 5 years ago

I think this functionality should be added to MDB.

Mikołaj Smoleński staff answered 5 years ago

Thank You very much for advice. We'll try to add this functionality in the next release.


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



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No