动态可编辑表单项

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