Автозаполнение JQuery из БД при весенней загрузке и Thymeleaf

это мой шаблон:

  <!-- 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>

и я не вижу оповещения («привет»), и оно также не доходит до сервера

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
113
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Измените это:

<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ñito Calzada 10.04.2024 08:12

@NuñitoCalzada Я обновил свой ответ, добавив идентификатор в форму и автозаполнение при вводе подсказки. Пожалуйста, попробуйте еще раз.

Rap 11.04.2024 12:31

@Rap, мне любопытно, почему ты удалил входной атрибут type?

FiddlingAway 13.04.2024 18:36

@FiddlingAway type=text используется по умолчанию для <input>s. Таким образом, чтобы добавить, нужно просто отправить больше символов с сервера клиенту. Делает вашу страницу легче для отправки клиенту. Включение этого не является неправильным, но в этом нет необходимости.

Rap 15.04.2024 13:47
Ответ принят как подходящий

Ошибка может быть вызвана двумя причинами:

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 (вероятно)

Версия slimJquery не имеет 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>

Другие вопросы по теме