Как получить результат поиска при наборе текста без нажатия кнопки ввода или отправки?

Question

Мой код работает нормально, но проблема в том, что я не могу найти решение, как показать результат поиска, не нажимая кнопку ввода или кнопку отправки. Я хочу показать результаты поиска из файла JSON, когда пользователь начнет вводить данные в поле поиска. Кто-нибудь может помочь? Я буду благодарен. Спасибо

Код, который я пробовал.

const result = document.getElementById('result');

const userAction = async(event) => {
  event.preventDefault();
  fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(todos => {
      todos.forEach((todo) => {
        result.innerHTML = `${todo.userId} ${todo.id} ${todo.title} ${todo.completed}`;
      });
    })
}

<form method="POST">
  <input type="text" id="searchName" class="form-control" placeholder="Lorem name">
  <button onclick="searchAction(event)" class="search-icon"><img src="images/search-icon.svg" alt="submit"></button>
</form>
<div class="dropbox">
  <p id="list"></p>
</div>

Answer 1

Используя событие ввода , вы можете запускать свой код каждый раз, когда нажимается клавиша (или происходит какое-либо другое изменение) в поле ввода.

Пример кода по ссылке выше:

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Обратите внимание, что с помощью этого вы будете делать один AJAX-вызов на нажатие клавиши. Поскольку это может спамить сервер слишком большим количеством бесполезных запросов, вам может потребоваться встроить некоторые функции кэширования или ограничения скорости (например, только выборку данных, если в течение секунды не было нажато ни одной клавиши).

Answer 2

Возможно, это будет не единственное изменение, которое вам придется сделать, но начните удалять событие onclick с кнопки. Вместо этого добавьте событие onkeyup к текстовому вводу. Здесь в MDN вы можете найти все события, выставленные по умолчанию.