Topic: Keyboard scroll for autocomplete

scs free asked 6 years ago


Hi, How can I scroll down using "keyboard arrow keys" through items in an autocomplete dropdown ? Now it is possible to scroll down using mouse but not with keyboard arrow keys.

Rodrigo Josakian Mio 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

Jakub Strebeyko staff answered 6 years ago


Hi there SCS, At the time being there is no such functionality, but it is planned, although we cannot estimate a date. With Best Regards, Kuba

shampton3@gmail.com pro commented 6 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 free commented 5 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.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags