I am updating my question because I have figured a way to make this work in Chrome, Firefox, Edge, etc. The last remaining browser is IE11.
I am using the autoComplete.js javascript library. Everything is hooked up and working.
I want to make a small accessibility improvement.
I notice when I type in the my search and the results list displays, I can press the TAB key to tab through the results list items.
However, when I press "ENTER" it does not trigger the query. This is strange behavior because when I press the down arrow after typing a search, I see the results list items highlighted (same as it did when I pressed the TAB button) and when I press ENTER the query fires.
I have tried adding tabSelect: true in the resultsLists config section, but I don't see any difference.
What I ended up doing was in my "resultItem" section, I added an eventlistener on the source to look for keyup events. I took the logic we had used for the "onSelection" section and applied it to the "resultItem" section.
What I see in IE11 is when I TAB through the list, I do not see the "selected" class getting added to the autocomplete suggestions. I can tab to them, but when I press ENTER it is only getting what I have typed in the input field.
Basically, the code I have looks like this, but i think this is an issue within autoComplete.js. This is totally understandable since the world is leaving IE11 behind. Our team may determine is not worth spending the time to fix.
A short code example:
resultItem: {
content: function content(data, source) {
source.tabIndex = 0;
source.innerHTML = data.match;
source.addEventListener('keyup', function (event) {
if (event.keyCode == 13) {
// do something
}
});
document.querySelector("#div-autoComplete").style.display = "block";
input.classList.add("div-expanded");
},
element: "li"
},