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

【问题标题】：How can I create two input tags that have autocomplete function and at the same time the second depends on what's entered in the first input tag?如何创建两个具有自动完成功能的输入标签，同时第二个取决于第一个输入标签中输入的内容？
【发布时间】：2020-05-13 04:50:28
【问题描述】：

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

显然 name 有机场名称和 country 它来自的国家。我正在尝试制作一种机场/航班 J2EE Web 应用程序。我想创建一个 JSP，它的表单允许管理员创建具有源机场、源国家、目的地机场和目的地国家的新航班。

我考虑过创建一个输入标签，该标签具有自动完成功能，可帮助管理员输入国家/地区名称，第二个输入也具有自动完成功能，但仅由输入的国家/地区的机场名称填充第一个输入或我考虑创建 2 个选择标签，其中第二个仅由上面选择的国家/地区的机场填充。

我有一个 Connection 类，它有一个函数可以从该数据库表中获取所有国家/地区名称，但我不知道之后该做什么。我怎样才能创建这些输入？还是那些选择标签？

我试过了：

<%@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)，它使用连接类中的方法创建的 arraylist 创建一个 json 对象，然后我尝试在 JSP 的脚本中调用它。

【问题讨论】：

你试过什么？你的代码在哪里？
@brso05 我刚刚添加了我尝试过的 JSP，它不起作用。

标签： java html jsp jakarta-ee

【解决方案1】：

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

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

您可以从数据列表中动态添加/删除选项。

----编辑（如何添加和删除）----

您可以像从选择中一样添加和删除选项

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

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

【讨论】：

如何添加/删除选项？
谢谢，但现在我如何根据管理员在第一个输入中选择的内容进行第二个输入？