Ввод формы поиска - поиск "по мере ввода" с помощью HTML/Javascript

У меня есть следующая форма поиска в HTML-странице на сайте, построенном на Django:

<form method="get">
<input class="form-control" type="text" name="q" id="id_q" placeholder="Search...">
</form>

Я хотел бы, чтобы поиск выполнялся во время набора текста (без необходимости нажимать клавишу Enter). Я знаю, что можно использовать onchange или onkeyup, но, похоже, я не могу заставить это работать.

Яваскрипт в нижней части страницы выглядит следующим образом:

<script type="text/javascript">
document.getElementById("id_q").value = "{{query}}"
</script>

после onchange вы можете получить текущие значения и послать запрос API или что-либо, что вы хотите сделать, как показано ниже-

window.addEventListener('load', () => {
  const input = document.getElementById("id_q");
  input.addEventListener('change', (e) => {
    let currentVal=e.target.value;
    // do anything with this value
  })
})

Вернуться на верх