Как сделать поиск ajax?

Для реализации поиска Ajax в JavaScript вы можете использовать следующий подход:

1. Создайте HTML разметку для поисковой формы, которая будет содержать текстовое поле для ввода запроса и кнопку отправки формы.

<form id="search-form">
  <input type="text" id="search-input" name="query" placeholder="Введите запрос">
  <button type="submit">Поиск</button>
</form>
<div id="search-results"></div>

2. Создайте JavaScript функцию, которая будет выполнять AJAX-запрос для поиска и обновлять результаты на веб-странице.

function search() {
  // Получаем значение из текстового поля
  var query = document.getElementById('search-input').value;

  // Создаем новый AJAX-запрос
  var xhr = new XMLHttpRequest();

  // Определяем метод запроса и URL
  xhr.open('GET', '/search?query=' + encodeURIComponent(query), true);

  // Определяем обработчик события изменения состояния запроса
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // Обработка успешного выполнения запроса
      var response = JSON.parse(xhr.responseText);

      // Обновление результатов на странице
      var resultsContainer = document.getElementById('search-results');
      resultsContainer.innerHTML = '';

      // Обходим полученные результаты
      for (var i = 0; i < response.results.length; i++) {
        var result = response.results[i];

        // Создаем HTML элемент для отображения результата
        var resultElement = document.createElement('div');
        resultElement.textContent = result.title;
        resultsContainer.appendChild(resultElement);
      }
    }
  };

  // Отправляем AJAX-запрос
  xhr.send();
}

3. Назначьте функцию search в качестве обработчика события отправки формы по клику на кнопку или нажатию Enter.

document.getElementById('search-form').addEventListener('submit', function(event) {
  event.preventDefault(); // Предотвращаем отправку формы
  search();
});

Теперь при вводе поискового запроса и отправки формы поиска будет выполнен AJAX-запрос к серверу, а результаты будут отображены на странице без ее перезагрузки.