Thymeleaf 吞下数据列表中的选项标签

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 引导应用程序中时，它可以工作并且我能够使用数据列表功能。但是，如果我将此文件添加为 Thymeleaf 模板并使用 Spring 控制器将请求路由到模板，则数据列表将呈现如下：

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

选项标签消失，它们的所有值都被连接起来。数据列表不再有效，因为没有选项标签。

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

Answer 1

这个问题似乎与使用 Thymeleaf 的 LEGACYHTML5 模式有关，如 here 所述。

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

spring.thymeleaf.mode: HTML

Answer 2

Thymeleaf 3 解决了这个问题。默认情况下 spring 引导使用 thymeleaf 2。以下步骤应该可以完成工作：

在你的 application.properties 添加：

spring.thymeleaf.mode=HTML
spring.thymeleaf.cache=false

并在您的 pom.xml 中添加：

<properties>
    <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-actuator-docs</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-cache</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
</dependencies>

Answer 3

如果您使用 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 吞下数据列表中的选项标签

Thymeleaf swallows option tags inside datalist

html

spring

datalist

thymeleaf