Keyboard scroll for autocomplete

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>

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

Please insert min. 15 characters.

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

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

scs

14Support score
6Questions 1Answers 0Snippets