'Autocomplete not showing current suggestions
Flask
@app.route("/get_title", methods = ["POST"])
def send_title():
data = request.get_json()
qry = Category.query.filter(Category.book_category == data['category']).first()
qry = [(i.bookname) for i in qry.booklist.filter(Books.bookname.like(data["search"])).limit(10)]
return json.dumps(qry)
JavaScript
async function loadNames(selectval, inputval) {
var your_data = {
"category": selectval,
"search": `%${inputval}%`
}
const response = await fetch(`/get_title`, {
method: "POST",
credentials: "include",
body: JSON.stringify(your_data),
cache: "no-cache",
headers: new Headers({
"content-type": "application/json"
})
})
const names = await response.json();
return names
}
let timeout = null
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var debounce_key = debounce(async function(){
var selectval = $('select').val()
var inputval = $('#Title').val()
let data = await loadNames(selectval, inputval)
$('#Title').autocomplete({
source: data
})
}, 350)
$("#Title").on("keyup", debounce_key)
Everytime a character is typed there would be a 0.35 seconds countdown and the fetch to the Flask route happens (returning related bookname)
However, in instance like this:
A user typed a whole word without reaching the 0.35s countdown > fetched /get_title > json received in javascript file > no auto suggest happens!!
The only way to trigger the autosuggest is to type another word (which would use the last fetched data as basis on autosuggest)
How could I make it as the user stops > 0.35 s countdown triggered > fetch > json received > autosuggest shows based on the current input.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
