ajax自动完成(示例代码)

1、Ajax自动完成是一种通过Ajax技术实现的输入框自动补全功能。它能够根据用户输入的内容，实时从服务器获取匹配的数据，并将匹配的结果展示在下拉列表中，供用户选择。

示例代码如下：

HTML部分：

<input type="text" id="searchInput" onkeyup="autocomplete(event)">
<div id="autocompleteList"></div>

JavaScript部分：

function autocomplete(event) {
  var input = document.getElementById("searchInput");
  var autocompleteList = document.getElementById("autocompleteList");
  // 获取用户输入的内容
  var keyword = input.value;
  // 使用Ajax发送请求，获取匹配的数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        showAutocompleteList(response);
      }
    }
  };
  xhr.open("GET", "autocomplete.php?keyword=" + keyword, true);
  xhr.send();
}
function showAutocompleteList(data) {
  var autocompleteList = document.getElementById("autocompleteList");
  autocompleteList.innerHTML = "";
  // 将匹配的结果展示在下拉列表中
  for (var i = 0; i < data.length; i++) {
    var item = document.createElement("div");
    item.textContent = data[i];
    autocompleteList.appendChild(item);
  }
}

在示例代码中，我们首先在HTML中定义了一个输入框和一个用于展示自动完成结果的下拉列表。当用户输入内容时，通过onkeyup事件触发autocomplete函数。

在autocomplete函数中，我们首先获取用户输入的内容，然后使用Ajax发送GET请求到服务器的autocomplete.php页面，并将用户输入的内容作为参数传递过去。服务器根据用户输入的内容，查询匹配的数据，并返回给前端。

在Ajax的回调函数中，我们首先判断请求是否成功，如果成功则将返回的数据解析为JSON格式。然后调用showAutocompleteList函数，将解析后的数据展示在下拉列表中。

showAutocompleteList函数用于将匹配的结果展示在下拉列表中，首先清空原有的下拉列表内容，然后使用循环遍历匹配的结果数据，创建一个新的div元素，并将匹配的结果作为其文本内容，最后将新创建的div元素添加到下拉列表中。

这样，当用户输入内容时，输入框会实时发送请求到服务器获取匹配的数据，并将数据展示在下拉列表中，实现了自动完成的功能。