前端HTML5的新标签datalist 使用

HTML5的新标签datalist 跟input一起使用

// 方法一
// list="data-list" 跟 id="data-list" 是关联起来的 
<input type="text" name="data" list="data-list" maxlength="20">
<datalist id="data-list" style="display:none;"> // 隐藏
    <option value="选择1">选择1</option> // 下拉可选的项
    <option value="选择1">选择1</option>
    <option value="选择1">选择1</option>
    <option value="选择1">选择1</option>
</datalist>

// 方法二
// 还可以模糊匹配。想让datalist显示服务端传回来的值，给它的选项值和属性值
<input type="text" name="data" list="data-list" maxlength="20">
<datalist id="data-list" style="display:none;"> // 隐藏
    // datas 传回来的对象  
    <option th:each="data:${datas}" th:text="${data.value}"         
      th:value="${data.attr}" th:selected="${data.attr == '12'}"> 
    </option>
</datalist>