如何在JSP中实现机场自动补全功能？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="autocomplete.css">
<script src="autocomplete.js"></script>

<input type="text" id="airportInput" name="airport" autocomplete="off">

$(document).ready(function() {
  $('#airportInput').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: 'airportSearch.jsp',
        dataType: 'json',
        data: {
          term: request.term
        },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2 // 最小输入字符数触发自动补全
  });
});

<%@ page contentType="application/json" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>

<%
  // 模拟从数据库或其他数据源获取机场数据
  List<String> airports = new ArrayList<>();
  airports.add("北京首都国际机场");
  airports.add("上海浦东国际机场");
  airports.add("广州白云国际机场");
  airports.add("深圳宝安国际机场");
  
  String term = request.getParameter("term");
  List<String> matchedAirports = new ArrayList<>();
  for (String airport : airports) {
    if (airport.contains(term)) {
      matchedAirports.add(airport);
    }
  }
  
  out.print("[");
  for (int i = 0; i < matchedAirports.size(); i++) {
    out.print("\"" + matchedAirports.get(i) + "\"");
    if (i < matchedAirports.size() - 1) {
      out.print(",");
    }
  }
  out.print("]");
%>