Highlight (goTo) the first item on each keystroke

How can I highlight (goTo) to the first item in the results on each keystroke?

I tried with this, but this will work only on the first keystroke, when result box is opened.

document.querySelector("#autoselect").addEventListener("open", function (event) {
    autoSelect.goTo(0);
});    

Is there an event which will fire on earch refresh of the results?

[folknor]

You should be able to use config.resultsList.element. It’s invoked by autoComplete.js every time the list is updated, right before it’s opened.

I’ve not tested it, but seems to me it should work.

const autoSelect = new autoComplete({
	data: {
		src: ...,
	},
	resultsList: {
		element: (element, data) => {
			//const { input, query, matches, results } = data
			autoSelect.goTo(0)
		}
	},
})

[mileusna]

@TarekRaafat thank you for quick response

I have tried that already but it looks like the results event is fired when the results are ready, not after they are displayed, so it doesn’t work out of the box.

However, I have managed to achieve what I want with small delay in results event using setTimeout, but I would appreciate some straight forward solution, if there is any.

document.querySelector("#autoselect").addEventListener("results", function (event) {
   setTimeout(() => {  autoSelect.goTo(0); }, 100);
});