autoComplete.js
autoComplete.js copied to clipboard
List Dont Append even tought finds the result
Im using this lib, and when searching using the async first takes some time to load since is pending the request finishes, any ideia how to improve this? since when i type bananas, some calls are made but because they are using aync even if the finnal call have results they dont get appended.
Also in some queries the endpoint returns an array with results, but the input dont show them on the list.
0: {value: 'Rua Adelina Lessa dos Santos , 46100-970 Brumado\r\n', data: Array(2)} 1: {value: 'Rua Presidente Castelo Branco , 46100-970 Brumado\r\n', data: Array(2)} }
code im using
` var autoCompleteJS = new autoComplete({ selector: "#" + autoCompleteId, placeHolder: "Search for Fruits...", threshold: 4, data: { src: async (query) => { if (query === "") { return; }
try {
// Fetch Data from external Source
const source = await fetch(`endpoint?search=${query}`);
// Data should be an array of `Objects` or `Strings`
const response = await source.json();
console.log(response)
return response.data;
} catch (error) { console.log(error)
return error;
}
},
// Data source 'Object' key to be searched
keys: ["value"],
},
resultsList: {
element: function element(list, data) {
if (!data.results.length) {
// Create "No Results" message element
var message = document.createElement("div");
// Add class to the created element
message.setAttribute("class", "no_result");
// Add message text content
message.innerHTML = "<span>Found No Results for \"" + data.query + "\"</span>";
// Append message element to the results list
list.prepend(message);
}
},
noResults: true
},
resultItem: {
highlight: true
},
events: {
input: {
selection: function selection(event) {
var selection = event.detail.selection.value;
autoCompleteJS.input.value = selection;
}
}
}
});
`
Any ideia if its possible to use ajax insted of async method and awaits
Hey @mrelliot69 ,
If anyone encounters this issue it means that even if results are found through the http/ajax call, they are still filtered.
To disable this functionality when, just specify when initializing the plugin.
searchEngine: function(query, record) {
return 1
}
I spent so much and was shocked when i found this, basically the plugin is not usable if you are using ajax and rely on the default configuration.
Hope somebody finds this useful.