-
[ ] System Information
- [ ] Firefox nightly 26. april
- [ ] Linux
-
[ ] Describe the bug
Here's the code for one of my autocompletes (work in progress)
new autoComplete({
data: {
src: async () => fetchBedriftsInfo(v("bedrift")),
key: ["navn", "organisasjonsnummer"],
cache: false,
results: list => {
const q = v("bedrift").toLowerCase()
return list.sort((first, second) => {
let fs = diceCoefficient(
q,
first.value.navn.toLowerCase()
)
let ss = diceCoefficient(
q,
second.value.navn.toLowerCase()
)
return ss > fs
})
}
},
query: {
manipulate: query => {
let nr = /^\d+$/.test(query.replace(/\s/g, ""))
if (nr === true) {
return query.replace(/\s/g, "")
}
return query
}
},
selector: "#bedrift",
threshold: 3,
debounce: 300,
resultItem: {
content: (data, element) => {
if (
data.value.forretningsadresse instanceof Object &&
typeof data.value.forretningsadresse.poststed ===
"string"
) {
element.innerHTML = `<span>${data.value.navn}</span><span class="text-muted">${data.value.forretningsadresse.poststed}</span>`
} else if (
data.value.postadresse instanceof Object &&
typeof data.value.postadresse.poststed === "string"
) {
element.innerHTML = `<span>${data.value.navn}</span><span class="text-muted">${data.value.postadresse.poststed}</span>`
} else {
element.innerHTML = `<span>${data.value.navn}</span>`
}
}
},
resultsList: {
container: (element) => {
const result = document.createElement("p")
result.setAttribute("class", "no_result")
result.setAttribute("tabindex", "1")
result.innerHTML = `Skriv inn hele organisasjonsnummeret, uten mellomrom.`
element.appendChild(result)
},
maxResults: 8,
idName: "bedrift-liste",
noResults: (list, query) => {
const result = document.createElement("li")
result.setAttribute("class", "no_result")
result.setAttribute("tabindex", "1")
let nr = /^\d+$/.test(query)
if (nr === true) {
result.innerHTML = `Skriv inn hele organisasjonsnummeret, uten mellomrom.`
} else {
result.innerHTML = `Fant ingen resultat for "${query}".`
}
list.appendChild(result)
}
},
onSelection: feedback => {
settBedrift(feedback.selection.value)
setTimeout(() => {
$("epost").focus()
}, 100)
}
})
In resultsList.container
I add a p
element at the top of the list that I want to use to give helpful information to the user. Here's a screenshot:
(the text in the p
is currently wrong, also the element is not styled properly - I just started implementing it, but that's not relevant to the bug)
- [ ] To Reproduce
Steps to reproduce the behavior: <!-- Example below-!>
- Add element to the container in
resultsList.container
- Type something in the input
- Wait for autocomplete to open
- See the element added in step 1 is there
- Type one more character (make the autocomplete refresh itself), and the element is gone
- [ ] Expected behavior
I want the element to be there every time :-)
I think the "problem" is in your function generateList
you do list.innerHTML = "";
if list
is non-null.
Perhaps it would be possible to add an attribute to my element that makes autoComplete.js not nuke it?
Or maybe you have an alternative solution for me :-)
Thank you!
bug