input既可以输入又可以下拉列表选择

最近在业务上碰到一个需求，输入框既可以输入又可以下拉选择，解决方法就是H5的新标签datalist ，下面直接上代码：

 

<input type="text" name="feng_kong_cuo_shi_1" list="feng_kong_cuo_shi_1" maxlength="20">
<datalist id="feng_kong_cuo_shi_1" style="display:none;">
    <option value="土地流转抵押">土地流转抵押</option>
    <option value="土地收益权质押">土地收益权质押</option>
    <option value="借款人夫妻提供连带责任保证">借款人夫妻提供连带责任保证</option>
    <option value="借款人亲属提供连带责任保证">借款人亲属提供连带责任保证</option>
    <option value="第三方公司提供连带责任保证">第三方公司提供连带责任保证</option>
    <option value="合作社提供连带责任保证">合作社提供连带责任保证</option>
    <option value="公务员提供连带责任保证">公务员提供连带责任保证</option>
    <option value="借款人投保借款人意外险">借款人投保借款人意外险</option>
    <option value="借款人投保政策性农险">借款人投保政策性农险</option>
    <option value="借款人投保商业性农险">借款人投保商业性农险</option>
    <option value="借款人投保相应财产保险">借款人投保相应财产保险</option>
    <option value="账户监管">账户监管</option>
    <option value="存货质押">存货质押</option>
    <option value="公司股权质押">公司股权质押</option>
    <option value="应收账款质押">应收账款质押</option>
    <option value="房产抵押">房产抵押</option>
    <option value="车辆抵押">车辆抵押</option>
    <option value="农机具抵质押">农机具抵质押</option>
    <option value="养殖物抵质押">养殖物抵质押</option>
    <option value="商标权质押">商标权质押</option>
    <option value="社交账号质押">社交账号质押</option>
</datalist>

，这个还可以自动模糊匹配。如果想让datalist显示后端传过来的值，也可以给他的选项设置值

 

<option th:each="background:${printerBackgrounds}" th:text="${background.name}" th:value="${background.id}" 

th:selected="${background.id == printer.background_id}"></option>

好了大功告成。这里记录下。