Ajax实现搜索文本框自动联想功能

以下是一个使用jQuery和Ajax实现搜索文本框自动联想功能的简单示例：

HTML部分：

<input type="text" id="search-input" placeholder="搜索...">
<div id="autocomplete-results">
  <!-- 自动联想的结果将被插入到这里 -->
</div>

CSS部分：

#autocomplete-results {
  border: 1px solid #999;
  cursor: default;
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  display: none;
}
 
#autocomplete-results li {
  padding: 5px 10px;
  background: #FFF;
  display: block;
  border-bottom: 1px solid #EEE;
}
 
#autocomplete-results li:hover {
  background: #F0F0F0;
}

JavaScript部分（使用jQuery和Ajax）：

$(document).ready(function() {
  $('#search-input').keyup(function() {
    var inputVal = $(this).val();
    var resultDropdown = $(this).siblings("#autocomplete-results");
    if(inputVal.length){
      $.ajax({
        type: "GET",
        url: "your-autocomplete-api-endpoint.php",
        data: 'input='+inputVal,
        success: function(data){
          // 假设返回的数据是JSON格式
          var data = JSON.parse(data);
          resultDropdown.empty();
          $.each(data.results, function(key, value) {
            resultDropdown.append($("<li></li>").text(value));
          });
          resultDropdown.show();
        }
      });
    } else{
      resultDropdown.empty();
      resultDropdown.hide();
    }
  });
 
  $(document).on("click", "#autocomplete-results li", function() {
    var text = $(this).text();
    $('#search-input').val(text);
    $('#autocomplete-results').empty();
    $('#autocomplete-results').hide();
  });
});

后端PHP示例（your-autocomplete-api-endpoint.php）：

<?php
// 假设你有一个方法来处理搜索和获取结果
$input = $_GET['input'];
$results = getAutocompleteSuggestions($input); // 自定义方法获取建议
 
header('Content-Type: application/json');
echo json_encode(['results' => $results]);

确保替换your-autocomplete-api-endpoint.php为你的实际后端API端点。这个PHP脚本应该根据输入的值返回相应的自动完成建议。