problem is that qutocomplete doesnt wait until my fetch is complete and show old results, can someone tell me how I can prevent this and force it to wait until my data come back?
heres code
var token = '<?php echo $token; ?>';
const autoCompleteJS = new autoComplete({
placeHolder: "<?php echo $help_address; ?>",
data: {
src: [],
cache: false,
},
resultItem: {
highlight: true
},
trigger: async (query) => {
if (query.length >= autoCompleteJS.threshold - 1) {
suggest(query);
return true;
}
return false;
//return query.replace(/ /g, "").length; // Returns "Boolean"
},
query: function(input) {
return input;
},
events: {
input: {
selection: function(event) {
const selection = event.detail.selection.value;
//console.log(selection)
this.value = selection;
},
open() {}
}
},
resultsList: {
element: (list, data) => {
data.results = data.results.filter((el, index) => {
if (el.value.includes('Riga') == false) {
var element = document.getElementById("autoComplete_result_" + index);
list.removeChild(element);
return false;
}
return true;
})
if (!data.results.length) {
// Create "No Results" message list element
const message = document.createElement("div");
message.setAttribute("class", "no_result");
// Add message text content
message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;
// Add message list element to the list
list.appendChild(message);
}
},
noResults: true,
maxResults: 20,
},
threshold: 3,
debounce: 200,
});
async function suggest(resource) {
let input = document.querySelector("#autoComplete").value
const api = document.querySelector("input[name=qwqer_api]").value;
const pt = document.querySelector("input[name=qwqer_trade_pt]").value;
let data = new FormData()
data.append("api_token", api);
data.append("trade_point", pt);
data.append("input", input);
autoCompleteJS.data.src =await fetch('index.php?route=extension/shipping/qwqer/autocomplete&token=<?php echo $token; ?>', {
method: "POST",
body: data,
})
.then((response) => {
// 1. check response.ok
if (response.ok) {
return response.json();
}
return Promise.reject(response); // 2. reject instead of throw
})
.then((data) => {
return data.data;
//autoCompleteJS.data.keys = ["title"];
}).catch(response => {
response.json().then((json) => {
console.log(json.message);
})
});
return autoCompleteJS.data.src
}
Hi I am trying to fetch data on key input using your library but i cant find a proper solution with your library, heres a problem i am facing
heres a graph https://i.imgur.com/j0wFveh.png.
problem is that qutocomplete doesnt wait until my fetch is complete and show old results, can someone tell me how I can prevent this and force it to wait until my data come back?
heres code