Autofocus search input field when opening material_select wi


Topic: Autofocus search input field when opening material_select with search

slawa pro asked 3 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:

$newSelect.on({
    focus: function focus() {
        if ($('ul.select-dropdown').not(options[0]).is(':visible')) {
            $('input.select-dropdown').trigger('close');
        }
        if (!options.is(':visible')) {
            $(this).trigger('open', ['focus']);
            var _label = $(this).val();
            var selectedOption = options.find('li').filter(function () {
                return $(this).text().toLowerCase() === _label.toLowerCase();
            })[0];
            activateOption(options, selectedOption);
            if(searchable){
                $(this).closest('.mdb-select').find('.search-wrap input.search').focus();
            }
        }
    },
    click: function click(e) {
        e.stopPropagation();
    }
});
The added lines are:
if(searchable){
    $(this).closest('.mdb-select').find('.search-wrap input.search').focus();
}
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>
</select>

cy pro commented 3 years ago

I think this functionality should be added to MDB.

Mikołaj Smoleński staff answered 3 years ago

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

Closed

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