th:each实现下拉搜索

th:each是Thymeleaf模板引擎中的一个迭代器，用于在模板中遍历集合并渲染对应的HTML元素。下拉搜索可以通过结合th:each和JavaScript实现，具体步骤如下：

1. 在HTML中定义一个select元素和一个input元素，用于展示下拉框和输入搜索内容。

<select id="select">
    <option th:each="option : ${options}" th:value="${option.value}" th:text="${option.label}"></option>
</select>
<input type="text" id="search-input" onkeyup="searchOptions()" />

其中，${options}表示需要遍历的选项列表，option表示每个选项对象，${option.value}和${option.label}分别表示选项的值和文本。

2. 在JavaScript中实现搜索逻辑，根据输入内容过滤选项并动态更新下拉框。

function searchOptions() {
    var input, filter, select, options, i, option;
    input = document.getElementById("search-input");
    filter = input.value.toUpperCase();
    select = document.getElementById("select");
    options = select.getElementsByTagName("option");
    for (i = 0; i < options.length; i++) {
        option = options[i];
        if (option.text.toUpperCase().indexOf(filter) > -1) {
            option.style.display = "";
        } else {
            option.style.display = "none";
        }
    }
}

其中，获取输入框、下拉框和选项元素的代码如下：

input = document.getElementById("search-input");
select = document.getElementById("select");
options = select.getElementsByTagName("option");

遍历选项元素并根据输入内容过滤的代码如下：

for (i = 0; i < options.length; i++) {
    option = options[i];
    if (option.text.toUpperCase().indexOf(filter) > -1) {
        option.style.display = "";
    } else {
        option.style.display = "none";
    }
}

以上就是结合th:each和JavaScript实现下拉搜索的方法。