Autofocus search input field when opening material_select wi

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>