Topic: Keyboard scroll for autocomplete
shampton3@gmail.com pro commented 7 years ago
Arrow key support would be very very nice :)Jakub Strebeyko staff commented 6 years ago
We also think that the keyboard support for autocomplete would make a great feature. Therefore, we are more than open for pull requests to our GitLab repo. Any help with making this come to life would be greatly appreciated. :)kennovation commented 6 years ago
One more strong vote for this. Users' muscle memory expect this since it is so common in other similar autocomplete dropdowns. Notably Chrome and Google search have this and therefore users are very strongly programmed to naturally expect this. I'd look to submit a pull request, but sadly I'm out of my depth for that.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
rjmio pro commented 6 years ago
Hello, I've changed the mdb.js code so I can navigate with the keys and change the background color. //mdb.js changes Version: MDB PRO 4.5.7 $.fn.mdb_autocomplete = function (options) { // Default options var defaults = { data: {} }; var ENTER_CHAR_CODE = 13; // Get options options = $.extend(defaults, options); return this.each(function () { // text input var $input = $(this); var $autocomplete = void 0; // assign data from options var data = options.data; if (Object.keys(data).length) { $('.mdb-autocomplete-wrap').remove(); $autocomplete = $(''); $autocomplete.insertAfter($(this)); } // Listen if key was pressed $input.on('keydown', function (e) { if ($autocomplete == undefined) return; /// *** INSERT *** var isTab = e.which === 9; // *** INSERT *** var isEsc = e.which === 27; // *** INSERT *** var isEnter = e.which === 13; // *** INSERT *** var isArrowUp = e.which === 38; // *** INSERT *** var isArrowDown = e.which === 40; // *** INSERT *** if ((!isArrowUp) && (!isArrowDown) && (!isEnter)) { // *** INSERT *** // get value from input var q = $input.val(); $autocomplete.empty(); // check if input isn't empty if (q.length) { for (var item in data) { // check if item contains value that we're looking for if (data[item].Text.toLowerCase().indexOf(q.toLowerCase()) !== -1) { // *** CHANGE *** var option = $('' + data[item].Text + ''); // *** CHANGE *** $autocomplete.append(option); } } } if (e.which === ENTER_CHAR_CODE) { $autocomplete.children(':first').trigger('click'); $autocomplete.empty(); } if (q.length === 0) { $('.mdb-autocomplete-clear').css('visibility', 'hidden'); } else { $('.mdb-autocomplete-clear').css('visibility', 'visible'); } } else { // *** INSERT ALL {}*** var options = $autocomplete; var newOption; var activateOption = function activateOption(collection, newOption) { if (newOption) { collection.find('li.selected').removeClass('selected'); var option = $(newOption); option.addClass('selected'); } }; if (isEnter) { var activeOption = options.find('li.selected:not(.disabled)')[0]; if (activeOption) { $input.val(activeOption.innerText); $input.attr("data-value", activeOption.value); $autocomplete.empty(); } } if (isArrowDown) { if (options.find('li.selected').length) { newOption = options.find('li.selected').next('li:not(.disabled)')[0]; } else { newOption = options.find('li:not(.disabled)')[0]; } activateOption(options, newOption); } if (isArrowUp) { newOption = options.find('li.selected').prev('li:not(.disabled)')[0]; if (newOption) { activateOption(options, newOption); } } setTimeout(function () { }, 1000); } }); $autocomplete.on('click', 'li', function () { // Set input value after click $input.val($(this).text()); //Set input data-value $input.attr("data-value", $(this).val()); //*** INSERT*** // Clear autocomplete $autocomplete.empty(); }); $('.mdb-autocomplete-clear').on('click', function (e) { e.preventDefault(); $input.val(''); $(this).css('visibility', 'hidden'); $autocomplete.empty(); $(this).parent().find('label').removeClass('active'); }); }); }; //function that searches the object with the data //id - name select //e - event function SearchPeople(id, e) { var isArrowUp = e.which === 38; var isArrowDown = e.which === 40; var isEnter = e.which === 13; if ((!isArrowUp) && (!isArrowDown) && (!isEnter)) { //not run if the event is KEYUP - KEYDOW - ENTER var input = $('#' + id); if (input.val().length > 2) { var param = { filter: input.val() } var controller = 'People'; var action = 'Search'; var url = controller + '/' + action + '/'; $.ajax({ url: url, type: "POST", dataType: "json", async: false, data: add_anti_forgery_token(param), success: function (data) { input.mdb_autocomplete({ data: data //the return of the object must be in the Text and Value format [{Value: 1, Text: "JOHNSON MARTINEZ"}] }); } }) } } } //include the css code in the style.css file inside the mdb folder .mdb-autocomplete-wrap li.selected { background-color: #eeeeee; } //Include the mdb-autocomplete component <div class="md-form col-md-6"> <input class="form-control mdb-autocomplete col-md-12" id="select-people" onkeydown="SearchPeople('select-people', event)" type="search"> </div>Jakub Strebeyko staff commented 6 years ago
Hi there rjmio, Huge thanks for reaching out with your solution! It has been passed on to our jQuery development team and once it does well in the tests, it might become a part of the package! Will keep you updated. With Best Regards, Kuba