遇到的问题:业务需要用户输入对应的username以发送私信给指定对象
方案1-input
输入就完事了
缺陷:要输入,麻烦
<form>
<label for="recipient-name">发给:</label>
<input type="text" id="recipient-name">
</form>
方案2-select
thymeleaf模板动态获取后端usernames列表供用户选择
缺陷:只能选择,无法自定义对象
<form>
<label for="recipient-name">发给:</label>
<select type="text" id="recipient-name">
<option th:each="list:${usernames}"
th:value="${list.username}" th:utext="${list.username}"></option>
</select>
</form>
方案3-datalist
通过datalist获取和thymeleaf动态获取后端的usernames列表
用户既可以通过input输入username,也可以选择name
<form>
<label for="recipient-name">发给:</label>
<input type="text" id="recipient-name" list="usernames"/>
<datalist id="usernames">
<option th:each="list:${usernames}"
th:value="${list.username}" th:utext="${list.username}"></option>
</datalist>
</form>
标签:usernames,单项,发给,编辑,input,datalist,动态,输入
From: https://www.cnblogs.com/twfplayer/p/17660989.html