HTML中的input输入框根据后台返回的动态模糊匹配输入的内容，可以选择，也可以输入，此处是使用的是HTML5新增的标签datalist来实现，不需要插件，页面加载完时直接将后台查询到的所有值赋给datalist，还有一种是输入框中有改变时都调用接口向后台查询一次，返回给前台，这里先不做介绍。
代码如下：
test.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--#include file="/saleweb/npage/public_title_name.html" --></head><body><div class="c-row pdt-l pdb-l"><div class="col-4"><div class="c-form-item"><p class="c-form-name">模板名称</p><div class="c-form-info"><input type="text" name="tempName" id="tempName" list="batch_list" autocomplete="off" placeholder="请输入" class="c-input"/><datalist id="batch_list"></datalist></div></div></div></div><div class="col-12" style="text-align: center; padding: 10px;"><div class="c-form-item"><button class="c-btn-l" onclick="qryseDiscountTempList(1)">查询</button><button class="c-btn-l" type="reset" id="btn_reset">重置</button><button class="c-btn-l" onclick="addDiscountTempMsg()">新建</button></div></div></body></html><script src="./js/test.js"></script>
test.js 我这里后台返回的是一个json数组，
$(document).ready(function () {queryList();});function queryList() {var seDiscountTempMsg=[{NAME: "测试一", STATE_DATE: "1115104955", STATE: "1", TEMP_ID: "104955011000001"},{NAME: "专线一", STATE_DATE: "1115104918", STATE: "0", TEMP_ID: "104918011000000"},{NAME: "5G一", STATE_DATE: "1114174557", STATE: "0", TEMP_ID: "174558011470000"}];var add_options;for(var i=0;i<seDiscountTempMsg.length;i++) {add_options += '<option value="' + seDiscountTempMsg[i].NAME + '">'+ seDiscountTempMsg[i].NAME + '</option>';}$("datalist#batch_list").append(add_options);}
效果如下：
注意：要引入jQuery：jquery-1.11.3.min.js，不然$(document)识别不出来，我这里是通过公共页面引入的。
