ajax实时搜索_示例代码

Ajax实时搜索是一种在网页中通过异步请求数据的方式来实现实时搜索功能的技术。它可以在用户输入关键字的向服务器发送请求，获取与关键字匹配的搜索结果，并将结果动态地展示在页面上，不需要刷新整个页面。这种技术可以提升用户体验，使搜索更加快速和便捷。

下面是一个简单的示例代码，演示了如何使用Ajax实现实时搜索功能。

我们需要在页面中创建一个输入框和一个用于展示搜索结果的区域。在输入框中，我们监听用户的输入事件，并在每次输入时发送Ajax请求。

<input type="text" id="searchInput" placeholder="请输入关键字">
<div id="searchResults"></div>

接下来，我们使用JavaScript来处理用户的输入事件，并发送Ajax请求。在发送请求之前，我们需要创建一个XMLHttpRequest对象，并指定请求的URL和请求方法。

var searchInput = document.getElementById('searchInput');
var searchResults = document.getElementById('searchResults');
searchInput.addEventListener('input', function() {
  var keyword = searchInput.value;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/search?keyword=' + keyword, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      showResults(response);
    }
  };
  xhr.send();
});
function showResults(results) {
  searchResults.innerHTML = '';
  results.forEach(function(result) {
    var item = document.createElement('div');
    item.textContent = result;
    searchResults.appendChild(item);
  });
}

在上面的代码中，我们使用addEventListener方法监听输入框的input事件。每次输入事件触发时，我们获取输入框中的关键字，并将其作为参数拼接到请求URL中。然后，我们通过XMLHttpRequest对象发送GET请求，并在请求成功后，解析响应的JSON数据，并调用showResults函数展示搜索结果。

showResults函数用于展示搜索结果。它首先清空之前的搜索结果，然后遍历结果数组，创建一个新的div元素，并将结果文本添加到div中，最后将div添加到搜索结果区域中。

通过以上代码，我们可以实现一个简单的实时搜索功能。每当用户在输入框中输入关键字时，页面将会实时显示与关键字匹配的搜索结果。