'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