Thymeleafでdatalistを使用した実装
1. HTMLテンプレート (Thymeleaf)
<form th:action="@{/submit}" method="post"> <label for="exampleInput">選択肢:</label> <input type="text" id="exampleInput" name="exampleInput" list="exampleList" /> <datalist id="exampleList"> <option th:each="option : ${options}" th:value="${option}" th:text="${option}"></option> </datalist> <button type="submit">送信</button> </form>
2. コントローラー
以下のJavaコードは、SpringBootのコントローラーで、datalistの選択肢を提供する方法を示しています。
import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import java.util.Arrays; import java.util.List; @Controller public class ExampleController { @GetMapping("/form") public String showForm(Model model) { List<String> options = Arrays.asList("オプション1", "オプション2", "オプション3"); model.addAttribute("options", options); return "form"; } @PostMapping("/submit") public String handleSubmit(@RequestParam String exampleInput, Model model) { model.addAttribute("selectedValue", exampleInput); return "result"; } }
このコードは、ThymeleafとSpringBootを使ってdatalistを実装する基本的な例です。
フォームに入力された値は、コントローラーで処理され、結果を表示するために別のテンプレートに渡すことができます。