Question

我有以下html：

<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head></head>

<body>

<input type = "text" name="city" id="city-selector" list="available-cities" autofocus/>
    <datalist  id="available-cities">
        <option value="1">Madrid</option>
        <option value="2">Barcelona</option>
        <option value="3">Sevilla</option>
        <option value="4">Valencia</option>

    </datalist>

</body>

</html>

当我在Spring Boot应用程序中将其添加为静态内容时，它可以工作，我可以使用datalist功能。但是，如果我将此文件添加为Thymeleaf模板并使用Spring控制器将请求路由到模板，则数据列表将呈现如下：

<datalist id="available-cities"> Madrid Barcelona Sevilla Valencia </datalist>

选项标签消失，所有值都连接在一起。由于没有选项标签，因此数据列表不再有效。

这是一个Thymeleaf错误还是我做错了什么？

Answer 1

正如here所解释的那样，这个问题似乎与使用LEGACYHTML5模式的Thymeleaf有关。

解决方法是use Thymeleaf 3以避免使用nekohtml，或者，如果这不是一个选项，则通过在application.properties中包含以下行来更改为HTML5模式：

spring.thymeleaf.mode: HTML

Answer 2

如果您使用LEGACYHTML5，则可以通过以下方式更改列表：

<datalist  id="available-cities">
 <select>
    <option value="1">Madrid</option>
    <option value="2">Barcelona</option>
    <option value="3">Sevilla</option>
    <option value="4">Valencia</option>
 </select>
</datalist>

Thymeleaf吞下datalist中的选项标签

2 个答案: