AJAX学习笔记9 搜索联想自动补全

// 假设我们有一个输入框和一个用于显示建议的列表
<input type="text" id="search-input" onkeyup="autocomplete()" placeholder="输入关键字" />
<ul id="autocomplete-list"></ul>
 
// 这是处理输入字段的keyup事件的函数
function autocomplete() {
  var input = document.getElementById('search-input');
  var list = document.getElementById('autocomplete-list');
  if (input.value.length > 0) {
    // 发送AJAX请求获取建议列表
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理返回的建议列表
        var suggestions = JSON.parse(xhr.responseText);
        // 清空现有列表项
        while (list.firstChild) {
          list.removeChild(list.firstChild);
        }
        // 创建并添加新的列表项
        for (var i = 0; i < suggestions.length; i++) {
          var suggestion = suggestions[i];
          var li = document.createElement('li');
          li.textContent = suggestion;
          li.onclick = function() {
            input.value = this.textContent;
          };
          list.appendChild(li);
        }
      }
    };
    xhr.open('GET', '/autocomplete?term=' + encodeURIComponent(input.value), true);
    xhr.send();
  } else {
    // 清空列表
    while (list.firstChild) {
      list.removeChild(list.firstChild);
    }
  }
}

这个简化的代码示例展示了如何实现一个基本的搜索联想自动补全功能。它使用了AJAX请求来获取建议列表，并在用户输入字段中更新列表项。这个例子假设服务器端有一个可以响应GET请求的接口，并且返回JSON格式的建议列表。