это мой шаблон:
<!-- JavaScript -->
<link rel = "stylesheet" href = "https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-3.7.1.js"></script>
<script src = "https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src = "https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity = "sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8 = "
crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script type = "text/javascript" >
$( function() {
$( "#hint" ).autocomplete({
source: "https://api.nunyito.com/api/geoDetailsForWeb",
minLength: 3,
select: function( event, ui ) {
alert('hi');
this.value = ui.item.value;
console.info( "Selected: " + ui.item.value + " aka " + ui.item.id );
return false;
}
});
} );
</script>
..
<form th:action = "@{/alarmNotification/save}" th:object = "${data}" method = "post">
<p >
<label for = "title">
</label><input id = "title" type = "text" th:field = "*{email}" placeholder = "Title"/>
<label for = "hint"></label><input type = "text" id = "hint" name = "hint" />
</p>
</form>
..
но у меня есть такие ошибки:
У меня такая же ошибка при использовании:
<form th:action = "@{/alarmNotification/save}" th:object = "${data}" method = "post">
<div>
<label for = "title">Title</label>
<input id = "title" name = "title" th:field = "*{email}" placeholder = "Title" autocomplete = "email" />
<label for = "hint">Hint</label>
<input id = "hint" name = "hint" />
</div>
</form>
и я не вижу оповещения («привет»), и оно также не доходит до сервера
Измените это:
<form th:action = "@{/alarmNotification/save}" th:object = "${data}" method = "post">
<p >
<label for = "title">
</label><input id = "title" type = "text" th:field = "*{email}" placeholder = "Title"/>
<label for = "hint"></label><input type = "text" id = "hint" name = "hint" />
</p>
</form>
К этому:
<form th:action = "@{/alarmNotification/save}" th:object = "${data}" id = "form1" method = "post">
<div>
<label for = "title">Title</label>
<input id = "title" name = "title" th:field = "*{email}" placeholder = "Title" autocomplete = "email" />
<label for = "hint">Hint</label>
<input id = "hint" name = "hint" autocomplete = "off" />
</div>
</form>
Если вы хотите, чтобы автозаполнение не выполнялось автоматически, используйте autocomplete = "off"
.
Если вы не хотите, чтобы в вашей форме были метки, полностью удалите метки и добавьте к каждой aria-метку <input>
:
<input aria-label = "Title" ... />
@NuñitoCalzada Я обновил свой ответ, добавив идентификатор в форму и автозаполнение при вводе подсказки. Пожалуйста, попробуйте еще раз.
@Rap, мне любопытно, почему ты удалил входной атрибут type
?
@FiddlingAway type=text
используется по умолчанию для <input>
s. Таким образом, чтобы добавить, нужно просто отправить больше символов с сервера клиенту. Делает вашу страницу легче для отправки клиенту. Включение этого не является неправильным, но в этом нет необходимости.
Ошибка может быть вызвана двумя причинами:
1 — Не добавлены все необходимые атрибуты, как сказал @Rap.
<form th:action = "@{/alarmNotification/save}" th:object = "${data}" id = "formData" method = "post">
<p>
<label for = "title">Title</label>
<input id = "title" type = "text" th:field = "*{email}" name = "title" placeholder = "Title" autocomplete = "email" />
<label for = "hint">Hint</label>
<input type = "text" id = "hint" name = "hint" autocomplete = "on" />
</p>
</form>
2 – Включая тонкую версию Jquery (вероятно)
Версия slim
Jquery
не имеет Ajax Library
, который требуется для функции ".autocomplete()"
jQuery UI
. Я знаю, что вы добавляете обе версии, но, вероятно, между ними конфликт, поэтому просто удалите версию slim
и повторите попытку:
<link rel = "stylesheet" href = "https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-3.7.1.js"></script>
<script src = "https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
к сожалению, у меня та же ошибка :-(