I have been trying to use an autocomplete library from https://tarekraafat.github.io/autoComplete.js/#/ called autocomplete.js. It is working fine all the way up until I start to add a third word to the query. When I get to the third word, even after one or two characters, I get get “no results found”, but otherwise I get no errors in the console.
If you run the code below, you will see what happens.
Somehow, typing a third word into the search box is causing it to lose the data somewhere between returning the results from the API, and when it gets to resultsList.element. I see no problems with data.src. Can anyone else see any problems with this code?
Here is the code I’m using:
const autoCompleteJS = new autoComplete({
selector: "#autoComplete",
data: {
src: [
"Don't Rock The Jukebox - Alan Jackson [CB Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [NU Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [DK Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [SC Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [P Karaoke]"
],
cache: false // Disable caching for dynamic data
},
threshold: 3, // Minimum number of characters before the autocomplete starts
debounce: 300, // Wait 300ms before fetching the data
resultsList: {
element: (list, data) => {
// Display "No Results" message when no results are found
if (!data.results.length) {
console.log("no results");
const message = document.createElement("div");
message.setAttribute("class", "no_results");
message.innerHTML = `<span>No results found</span>`;
list.appendChild(message);
}
},
maxResults: 10, // Maximum number of results to show
noResults: true
},
resultItem: {
highlight: true,
element: (item, data) => {
console.log("data: " + data)
// Display the result item
item.innerHTML = `<span>${data.value}</span>`;
}
},
onSelection: (feedback) => {
const selection = feedback.selection.value;
document.querySelector("#autoComplete").value = selection;
console.log("Selected item:", selection);
}
});<link href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>
<div class="container mt-5 pt-5 col-md-5">
<h4>Search Songs</h4>
<div id="autocomplete" class="autocomplete">
<input id="autoComplete" type="text" placeholder="Search Karaoke">
<ul class="autocomplete-result-list"></ul>
</div>
</div>EDIT:
I think I figured something out. This library seems to want to search through the results on its own. It doesn’t respect the search results I feed it. As long as the words I type are together in the results, it displays them. Is there a way to keep it from doing its own sorting?
I figured it out. As I suspected, this library tries to do its own search on the results I already filtered in the API. It’s not as intelligent of a search as mine, so it blocks the results if I type, for instance, “Alan Jackson Jukebox”, where my search will recognize it.
Anyway, they don’t exactly have a way to directly disable it, but you can put in a function that returns true. And no, setting it directly to true doesn’t work for some reason. Setting it to ‘loose’ doesn’t do it either.
const autoCompleteJS = new autoComplete({
selector: "#autoComplete",
data: {
src: [
"Don't Rock The Jukebox - Alan Jackson [CB Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [NU Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [DK Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [SC Karaoke]",
"Don't Rock The Jukebox - Alan Jackson [P Karaoke]"
],
cache: false // Disable caching for dynamic data
},
searchEngine: (query, record) => {
return true
},
threshold: 3, // Minimum number of characters before the autocomplete starts
debounce: 300, // Wait 300ms before fetching the data
resultsList: {
element: (list, data) => {
// Display "No Results" message when no results are found
if (!data.results.length) {
console.log("no results");
const message = document.createElement("div");
message.setAttribute("class", "no_results");
message.innerHTML = `<span>No results found</span>`;
list.appendChild(message);
}
},
maxResults: 10, // Maximum number of results to show
noResults: true
},
resultItem: {
highlight: true,
element: (item, data) => {
console.log("data: " + data)
// Display the result item
item.innerHTML = `<span>${data.value}</span>`;
}
},
onSelection: (feedback) => {
const selection = feedback.selection.value;
document.querySelector("#autoComplete").value = selection;
console.log("Selected item:", selection);
}
});<link href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.min.js"></script>
<h4>Search Songs</h4>
<div id="autocomplete" class="autocomplete">
<input id="autoComplete" type="text" placeholder="Search Karaoke">
<ul class="autocomplete-result-list"></ul>
</div>