如何使用Jquery创建自动补全功能？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type="text" id="searchInput" />

$(document).ready(function() {
  // 监听输入框的键盘事件
  $('#searchInput').keyup(function() {
    var keyword = $(this).val(); // 获取输入框的值

    // 发送Ajax请求，获取匹配的结果
    $.ajax({
      url: 'autocomplete.php', // 后端处理自动补全的接口地址
      method: 'POST',
      data: { keyword: keyword }, // 发送关键字到后端
      success: function(response) {
        // 处理后端返回的结果
        var suggestions = JSON.parse(response); // 将返回的结果解析为JSON格式

        // 清空自动补全列表
        $('#autocompleteList').empty();

        // 遍历结果，生成自动补全列表
        for (var i = 0; i < suggestions.length; i++) {
          var suggestion = suggestions[i];
          var listItem = $('<li>' + suggestion + '</li>'); // 创建列表项
          $('#autocompleteList').append(listItem); // 添加到自动补全列表
        }
      }
    });
  });
});

<ul id="autocompleteList"></ul>