AdSense

網頁

2021/6/27

jQuery UI Autocomplete從Spring Boot Controller取得資料範例

jQuery UI的Autocomplete(欄位自動完成)透過ajax從Spring Boot Controller取得資料範例。


範例環境:

  • Java 8
  • Spring Boot 2.3.2.RELEASE
  • jQuery 3.6
  • jQuery UI 1.12

建立Spring Boot專案然後在src/main/resources/static目錄建立一個index.html內容如下。

<script>使用jQuery CDN取得JQuery及JQuery UI的js。

使用jQuery.ajax()呼叫Spring Boot DemoController的API /langs取得資料,然後將取回的資料傳入jQuery.autocomplete()的參數物件屬性source作為Autocomplete的資料源。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<title>Title</title>
<script>
$(function() {
  $.ajax({
    url : '/langs',
    type : 'get',
    dataType : 'json',
    success : function(data) {
      inputAutocomplete(data)
    },
  });
});

function inputAutocomplete(data) {
  $("#lang").autocomplete({
    source: data,
    messages: {
      noResults: '', // do not show no result message
      results: function(amount) { // do not show numbers of results message
          return ''
      }
    }
  });
}
</script>
</head>
<body>
    <input id="lang">
</body>
</html>

Spring Boot的DemoController.langs()的API /langs回傳資料給上面jQuery UI Autocomplete的source

DemoController

ackage com.abc.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Arrays;
import java.util.List;

@RestController
public class DemoController {

    @GetMapping("/langs")
    public List<String> getLangs() {
        return Arrays.asList(
                "C",
                "C++",
                "C#",
                "Erlang",
                "Go",
                "Groovy",
                "Java",
                "JavaScript",
                "PHP",
                "Python",
                "Ruby",
                "Scala"
        );
    }
}

參考github


三年沒碰jQuery好不熟。


沒有留言:

AdSense