Реализовать вывод результата поиска, с выбором среди результатов?
По логике должно быть так:
Пользователь начинает вводить слово. При введении > 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()); } |
@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>&#x2714;</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> |
<!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>&#x2714;</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 |
[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
где я не прав?
Дополнительно:
Ответы:
Добрый день.
Если вы решили реализовать полнотекстовой поиск, то такие библиотеки, как Hibernate Search, ElasticSearch, Apache Lucene вам в помощь.
Теперь, что касается вашего функционала, то вот ошибка:
"Error resolving template [autocomplete], template might not exist or might not be accessible".
Он не видит шаблон autocomplete.
Так как не вижу вашего кода, то сделаю смелое предположение, что класс в котором находится эндпоинт autocomplete аннотиирован @Controller
И если uri - add_trackable возвращает ваш шаблон и корректно работает, то autocomplete не будет работать, так как вы выполняете ajax запрос. Тут 2 варианта - вынести этот эндпоинт в отдельный класс и обозначить, как @RestController . Или же к этому методу добавить @ResponseBody
К слову, прочитайте про разница @Controller и @RestController
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации вывода результатов поиска с выбором среди них, можно использовать следующий подход:
1. Создайте форму поиска на вашем сайте, где пользователь может ввести ключевое слово для поиска.
2. При отправке формы, обработайте запрос на сервере и выполните поиск по вашей базе данных или другому источнику данных.
3. Полученные результаты поиска передайте на страницу для отображения пользователю.
4. Отобразите результаты поиска с помощью цикла, который пройдет по массиву результатов и выведет информацию о каждом из них.
5. Для выбора среди результатов, добавьте кнопку или выпадающий список, который позволит пользователю выбрать нужный результат.
6. При выборе определенного результата, отобразите его подробную информацию или выполните дополнительные действия, в зависимости от потребностей вашего сайта.
Пример кода на PHP для отображения результатов поиска с выбором среди них:
// Получаем результаты поиска (пример данных) $results = [ ['title' => 'Результат 1', 'description' => 'Описание результата 1'], ['title' => 'Результат 2', 'description' => 'Описание результата 2'], ['title' => 'Результат 3', 'description' => 'Описание результата 3'], ]; // Выводим результаты foreach ($results as $result) { echo '<h3>' . $result['title'] . '</h3>'; echo '<p>' . $result['description'] . '</p>'; echo '<button>Выбрать</button>'; }
Этот код позволит вывести результаты поиска на страницу и добавить кнопку "Выбрать" для выбора конкретного результата. Пользователь сможет выбрать нужный результат и выполнить необходимые действия.