По логике должно быть так:
Пользователь начинает вводить слово. При введении > 3 символов, выводятся все совпадения в список. При выборе подходящего совпадения, оно выводиться на печать System.out.println(mychoise);
Контролер:
@GetMapping("/add_trackable")
public String choose(@RequestParam("selected") String mychoise) {
System.out.println(mychoise);
return "add_trackable";
}
@GetMapping("/autocomplete")
public Iterable<String> autocomplete(@RequestParam("input") String input) {
if (input.length() < 3)
return Collections.emptyList();
return view_units_repo.find_SHORT_NAME_Like(input)
.stream()
.map(view_units -> view_units.getSHORT_NAME())
.collect(Collectors.toList());
}
html:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Вариант добавления</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.custom-autocomplete {
max-height: 144px; /* 6 элементов по 24 пикселя в высоту */
overflow-y: auto;
overflow-x: hidden;
}
.ui-widget {
position: relative;
margin-left: 10px;
}
#checkmark {
color: limegreen;
position: absolute;
left: -22px;
top: 50%;
transform: translateY(-50%);
}
#submit-button {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Добавить сотрудника</h1>
<div class="alert alert-info mt-2">
<div class="ui-widget">
<span id="checkmark" hidden>✔</span>
<input type="text" class="form-control" id="text-input" name="text-input" placeholder="Введите текст">
</div>
<button type="submit" class="btn btn-primary mt-2" id="submit-button" disabled>Submit</button>
<button type="button" class="btn btn-secondary mt-2" id="clear-button">Clear</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$(function () {
selected = "";
$("#text-input").autocomplete({
source: function (request, response) {
$.ajax({
url: "/autocomplete",
dataType: "json",
data: {
input: request.term
},
success: function (data) {
if (data.length > 0) {
response(data);
} else {
response([{ label: "Совпадений не найдено!", value: "" }]);
}
}
});
},
select: function (event, ui) {
if (ui.item.value !== "Совпадений не найдено!") {
selected = ui.item.value;
$("#submit-button").prop("disabled", false);
} else {
event.preventDefault();
}
}
}).autocomplete("widget").addClass("custom-autocomplete");
$("#text-input").on("focus", function () {
$("#checkmark").prop("hidden", true);
});
$("#text-input, #task").on("input change", function () {
if (selected == "" || selected !== $("#text-input").val().trim()) {
$("#submit-button").prop("disabled", true);
}
});
$("#submit-button").on("click", function () {
$("#text-input").val("");
$.ajax({
url: "/add_trackable",
dataType: "json",
type: "GET",
data: {
selected: selected
},
complete: function () {
$("#checkmark").prop("hidden", false);
},
error: function () {
// alert("Error!")
}
});
});
$("#clear-button").on("click", function () {
$("#text-input").val("");
$("#submit-button").prop("disabled", true);
});
});
/*]]>*/
</script>
</body>
</html>
Но:
[THYMELEAF][http-nio-8083-exec-1] Exception processing template "autocomplete": Error resolving template [autocomplete], template might not exist or might not be accessible by any of the configured Template Resolvers
org.thymeleaf.exceptions.TemplateInputException: Error resolving template [autocomplete], template might not exist or might not be accessible by any of the configured Template Resolvers
где я не прав?
Простой
Сложный
Средний