如何使用带有jQuery AutoComplete的选择框？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

$(document).ready(function() {
  $("#autocomplete-input").autocomplete({
    source: function(request, response) {
      // 在这里编写获取数据的逻辑，例如从服务器获取数据
      // 示例数据
      var data = ["Apple", "Banana", "Cherry", "Grape", "Lemon", "Orange", "Peach", "Strawberry"];

      // 根据用户输入过滤数据
      var filteredData = data.filter(function(item) {
        return item.toLowerCase().startsWith(request.term.toLowerCase());
      });

      // 将过滤后的数据返回给jQuery UI
      response(filteredData);
    }
  });
});