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好不熟。
沒有留言:
張貼留言