Java 如何创建两个具有自动完成功能的输入标记，同时第二个标记取决于第一个输入标记中输入的内容？_Java_Html_Jsp_Jakarta Ee

Java 如何创建两个具有自动完成功能的输入标记，同时第二个标记取决于第一个输入标记中输入的内容？

java html jsp jakarta-ee

Java 如何创建两个具有自动完成功能的输入标记，同时第二个标记取决于第一个输入标记中输入的内容？,java,html,jsp,jakarta-ee,Java,Html,Jsp,Jakarta Ee,我有一个名为airports的MySQL数据库，它有两列：name和country 显然，这个名字有机场的名字和它来自的国家。我正在尝试创建一种机场/航班J2EE web应用程序。我想创建一个JSP，它有一个表单，允许管理员创建包含源机场、源国家、目的地机场和目的地国家的新航班我想制作一个具有自动完成功能的输入标签，帮助管理员输入国家名称，第二个输入也具有自动完成功能，但仅由位于第一个输入中输入的国家的机场名称填充，或者我想创建两个选择标签，其中第二个是仅由上述选定国家的机场填充我有一个连接

我有一个名为airports的MySQL数据库，它有两列：name和country

显然，这个名字有机场的名字和它来自的国家。我正在尝试创建一种机场/航班J2EE web应用程序。我想创建一个JSP，它有一个表单，允许管理员创建包含源机场、源国家、目的地机场和目的地国家的新航班

我想制作一个具有自动完成功能的输入标签，帮助管理员输入国家名称，第二个输入也具有自动完成功能，但仅由位于第一个输入中输入的国家的机场名称填充，或者我想创建两个选择标签，其中第二个是仅由上述选定国家的机场填充

我有一个连接类，它有一个函数，可以从数据库表中获取所有国家的名称，但我不知道以后该怎么做。如何创建这些输入？还是那些选择标签

我试过这个：

<%@page import="com.mysql.cj.xdevapi.JsonArray"%>
<%@page import="java.util.ArrayList"%>
<%@page import="connectionPackage.ConnectionClass"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var country= new Array();
$.getJSON("/Jss", function( data ) {
    country = JSON.parse(data);
    console.log(country);
    $('input.autocomplete').autocomplete({
      data: country
    });
</script>
<title>Insert title here</title>
</head>
<body>
<%
ConnectionClass class1 = new ConnectionClass();
ArrayList<String> list = new ArrayList<String>();
list = class1.getCountries();
%>

<form method="post" action="createFlight">
    <div>
    <div class="input-field col s12">
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
    </div>
</form>
</body>
</html>

我尝试创建一个servlet/Jss，它使用该方法从connection类创建的arraylist创建一个json对象，然后我尝试在JSP中的脚本中调用它。

您可以使用DataList在HTML中创建一个自动完成的输入字段

<input list="myData">
<datalist id="myData">
<option value="a" />
<option value="b" />
...

你试过什么？您的代码在哪里？@brso05我刚刚添加了我尝试使用的JSP，但它不起作用。我如何添加/删除选项？谢谢，但现在我如何根据管理员在第一个输入中选择的内容进行第二个输入？

//addition
var myOption = ...; // an OPTION element
var dl = document.getElementById("myData").appendChild(myOption);

//removal
var toRemove = document.querySelector("#myData option[value=a]");