代码之家 › 专栏 › 技术社区 › Nuñito Calzada

JQuery在spring boot和Thymelaf中从DB自动完成

spring-thymeleaf jquery-ui spring-mvc spring-boot jquery

0

Nuñito Calzada · 技术社区 · 1 年前

这是我的模板:

  <!-- 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.log( "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>

我没有看到警报(“hi”),也没有到达服务器

0 回复 | 直到 1 年前

1

3

Rap 1 年前

更改此项:

<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" 相反

如果您不希望表单有标签,请完全删除标签,并为每个标签添加咏叹调标签 <input> :

<input aria-label="Title" ... />

2

1

Kobra 1 年前

错误可能由两个因素引起:

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 。我知道你正在添加两个版本,但这可能是它们之间的冲突,所以只需删除 苗条的 版本,然后重试:

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