gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 18:40:42 25 4
gpt4 key购买 nike

我有一个名为 airports 的 MySQL 数据库,它有 2 列:名称国家/地区

显然,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),它使用连接类中的方法创建的数组列表创建一个 json 对象,然后尝试在 JSP 的脚本中调用它。

最佳答案

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

关于java - 如何创建两个具有自动完成功能的输入标签,同时第二个输入标签取决于第一个输入标签中输入的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59937455/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com