如何使用Jquery自动完成功能填充表单值

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<input type="text" id="inputField">
<ul id="autocompleteList"></ul>

$(document).ready(function() {
  // 监听输入框的键盘输入事件
  $('#inputField').keyup(function() {
    var query = $(this).val(); // 获取输入框的值
    if (query !== '') {
      // 发送AJAX请求，获取自动完成的数据
      $.ajax({
        url: 'autocomplete.php', // 替换为实际的后端接口地址
        method: 'GET',
        data: { query: query },
        success: function(response) {
          // 清空自动完成列表
          $('#autocompleteList').empty();
          // 遍历返回的数据，添加到自动完成列表中
          $.each(response, function(index, item) {
            $('#autocompleteList').append('<li>' + item + '</li>');
          });
        }
      });
    } else {
      // 清空自动完成列表
      $('#autocompleteList').empty();
    }
  });

  // 监听自动完成列表项的点击事件
  $('#autocompleteList').on('click', 'li', function() {
    var value = $(this).text(); // 获取点击的列表项的值
    $('#inputField').val(value); // 将值填充到输入框中
    $('#autocompleteList').empty(); // 清空自动完成列表
  });
});

<?php
$query = $_GET['query']; // 获取前端传递的查询参数

// 根据查询参数进行数据查询，返回匹配的结果
$data = array('Apple', 'Banana', 'Orange', 'Pineapple');
$results = array();
foreach ($data as $item) {
  if (strpos($item, $query) !== false) {
    $results[] = $item;
  }
}

// 返回JSON格式的结果
header('Content-Type: application/json');
echo json_encode($results);
?>