异步通信技术AJAX | AJAX实现搜索联想和自动补全

// 假设我们有一个输入框和一个显示建议的容器
<input type="text" id="search-input" onkeyup="autocomplete()" placeholder="输入关键词" />
<div id="autocomplete-items"></div>
 
// 这是实现搜索联想和自动补全的JavaScript代码
function autocomplete() {
  var input = document.getElementById("search-input");
  var autocompleteItems = document.getElementById("autocomplete-items");
  if (input.value.length > 0) {
    // 创建XMLHttpRequest对象
    var xmlhttp = new XMLHttpRequest();
    
    // 当服务器响应就绪后处理服务器响应
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 获取服务器响应的数据
        var response = JSON.parse(xmlhttp.responseText);
        
        // 清除之前的建议
        autocompleteItems.innerHTML = '';
        
        // 遍历返回的数据并创建建议列表项
        response.forEach(function(item) {
          var item = document.createElement('div');
          item.innerHTML = item;
          item.onclick = function() {
            input.value = item.innerHTML;
          };
          autocompleteItems.appendChild(item);
        });
      }
    };
    
    // 向服务器发送请求
    xmlhttp.open("GET", "server.php?q=" + input.value, true);
    xmlhttp.send();
  } else {
    autocompleteItems.innerHTML = '';
  }
}

这段代码展示了如何使用AJAX技术实现搜索框的自动完成功能。当用户在搜索框中输入时，会向服务器发送请求，服务器响应一个建议列表，然后在客户端显示这个列表供用户选择。用户可以点击列表中的项来完成搜索词的自动补全。