时间戳

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

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

问题描述

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

显然name有机场名称和国家它来自的国家。我正在尝试制作一种机场/航班 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 中的脚本中调用它。

标签： javahtmljspjakarta-ee

解决方案

您可以使用 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]");

推荐阅读