Thymeleafでdatalistを使用した実装

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を実装する基本的な例です。
フォームに入力された値は、コントローラーで処理され、結果を表示するために別のテンプレートに渡すことができます。