动态可编辑表单项

遇到的问题：业务需要用户输入对应的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>