我正在使用Thymeleaf模板构建视图,该模板包含一种形式,该形式提供了一种将输入值与模型中传递的属性绑定的方式。后端是使用Spring 4开发的。
以下代码片段包含一个自动完成数据列表,其中包含名称列表对象的数据,该列表已作为属性添加到模型中。所述名称列表是具有字段int id
和String name
的类的ArrayList。
<form th:action="@{/}" method="POST" th:object="${example}">
<div class="form-group">
<input list="names" class="form-control" id="nameinput" th:field="${example.num.id}"> </input>
<datalist id="names">
<option th:each="row : ${namelist}" th:value="${row.id}" th:label="${row.name}">
</datalist>
<button>submit</button>
</div>
</form>
所选选项的值已经绑定到example.num.id,这是预期和期望的行为。但是,当在网络浏览器上加载视图(在最新的Firefox和Chrome上测试)时,视图表示如下:
如您所见,显示的是ID。但是,我正在尝试模拟<select>
的行为;该值不应显示,而仅是文本或标签。
是否有更好的方法来实现这一目标?我没有正确使用数据列表吗?