Topic: Autofocus search input field when opening material_select with search
slawa pro asked 6 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>
Mikołaj Smoleński staff answered 6 years ago
Thank You very much for advice. We'll try to add this functionality in the next release.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Tags
slawa pro commented 6 years ago
I think this functionality should be added to MDB.