Can't find what you're looking for?

Contact us or post in our forums and we'll help you find an answer.

Set the Tab Key to Choose the Top Filtered Selection in AutoComplete with ASP.NET Core MVC Edition

Background:

This functionality involves adding a keydown event listener on any hostElement of AutoComplete where Tab should select the top filtered selection.

Steps to Complete:

1. Pick each AutoComplete object you’d like to add the keydown event listener to:

cityAC.hostElement.addEventListener('keydown', selectFirst(cityAC));
countryAC.hostElement.addEventListener('keydown', selectFirst(countryAC));

2. Create the function to select the Tab key as the listener:

function selectFirst(ac) {
	var listener = function (e) {
		if (e.key === 'Tab') {
			var listBox = ac.listBox;
			if (listBox.collectionView.itemCount > 0)
				ac.selectedItem = listBox.collectionView.items[0];
		}
	}
	return listener;
}

a. Note that line 3 can be changed to work with any key, not just Tab.

Get the Latest Version of ASP.NET Core MVC Edition
Download the Free Trial Now