Как я могу создать два тега ввода, которые имеют функцию автозаполнения, и в то же время второй зависит от того, что введено в первый тег ввода? - PullRequest
Новая
       5

Как я могу создать два тега ввода, которые имеют функцию автозаполнения, и в то же время второй зависит от того, что введено в первый тег ввода?

0 голосов
/ 27 января 2020

У меня есть MySQL база данных, называемая аэропортами, которая имеет 2 столбца: имя и страна .

Очевидно, имя имеет аэропорт имя и страна страна, из которой он. Я пытаюсь сделать своего рода J2EE-приложение для аэропорта / рейса. Я хочу создать 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>

Я пытался создать сервлет (/ Jss), который создает объект json с использованием массива, созданного методом из класс соединения, а затем я попытался вызвать его в сценарии в JSP.

1 Ответ

0 голосов
/ 27 января 2020

Вы можете создать поле автозаполнения в HTML, используя DataList 

<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]");
...