"More results"

[ghost]

Is your feature request related to a problem? Please describe.
So I set my maxResults to 10 and obviously the 11th item disappeared.

Thoroughly Describe the solution you'd like
I would like to know if there's a feature yet to add a more results button on the resultsList; which adds some kind of pagination to go to the 11th item and make the 10 items dissapear for the viewport.

Please provide a few use cases for this feature

1. ... Responsiveness
2. ... No more lost results

[varunsingh87]

I will work on this

[folknor]

Here we go, since autoComplete.js 9.1.0 introduced const {input, query, matches, results} = data to resultsList.element, this is now easy to accomplish:

ScornfulHopefulAustrianpinscher-mobile.mp4

Some of the relevant code below. This can't easily be copied and pasted, you need to understand the code. Also I only wrote this as an example, I do not plan to use this code in my app so it is not well tested or complete.

var currentResults
var acMax = 8
var acCurrent = 1

function redrawAutocompleteResults(container) {
	let add = 0
	for (let c of container.children) {
		if (c instanceof HTMLLIElement && c.classList.contains("autoComplete_result")) {
			bedriftAutocompleteContent(currentResults[acCurrent + add], c)
			add = add + 1
		}
	}
	$("autoComplete_stats").innerHTML = acCurrent + "-" + (acCurrent + acMax - 1) + " / " + currentResults.length
}

function autocompletePrev(ev, container) {
	if ( acCurrent > 1 ) {
		acCurrent = acCurrent - acMax
		redrawAutocompleteResults(container)
	}
	ev.stopPropagation()
}

function autocompleteNext(ev, container) {
	if ( (acCurrent + acMax) < currentResults.length ) {
		acCurrent = acCurrent + acMax
		redrawAutocompleteResults(container)
	}
	ev.stopPropagation()
}

function lagAutocompleteHjelp(element, tekst) {
	const hjelp = document.createElement("p")
	hjelp.classList.add("autoComplete_info", "small")
	hjelp.innerHTML = `<span class="fa fa-question-circle"></span>${tekst}`
	hjelp.addEventListener("click", ev => {
		ev.stopPropagation()
	})
	element.prepend(hjelp)

	acCurrent = 1
	acMax = 8

	const pag = document.createElement("div")
	pag.classList.add("d-flex", "justify-content-between")
	pag.onclick = (ev) => { ev.stopPropagation() }
	
	const prev = document.createElement("span")
	prev.classList.add("ff", "fa-arrow-left", "p-1")
	prev.onclick = function(ev) { autocompletePrev(ev, element) }
	pag.append(prev)

	const stats = document.createElement("p")
	stats.classList.add("text-muted", "small", "p-1", "m-0")
	stats.setAttribute("id", "autoComplete_stats")
	stats.innerHTML = "1-8 / " + currentResults.length
	pag.append(stats)

	const next = document.createElement("span")
	next.classList.add("ff", "fa-arrow-right", "p-1")
	next.onclick = function(ev) { autocompleteNext(ev, element) }
	pag.append(next)

	element.append(pag)
}

autoComplete = {
	resultsList: {
		element: (element, data) => {
			currentResults = data.matches
			lagAutocompleteHjelp(
				element,
				"Du må velge en bedrift fra denne listen. Det er ikke nok å skrive inn navnet eller organisasjonsnummeret."
			)
		},
		maxResults: 8,
	}
}

EDIT: This comment was written for an older version of autoComplete.js. You will need to adjust it accordingly.

[folknor]

I see now there is a bug because i do not replace the click event on the li element, so the autocomplete still calls onSelection with the data from the initial list when you click them. This is easy to fix - there are at least 3 ways of fixing it that I can think of off the top of my head. Since I will not use this code myself I can't be bothered to explain further unless someone actually asks.