1.先引入js,css
<link rel="stylesheet" href="../../../jquery-ui-1.12.1.custom/jquery-ui.css">
<script type="text/javascript" src="../../../jquery-ui-1.12.1.custom/jquery-ui.js"></script>
2.input框
<input lay-filter="dognwupici" id="dongwupici" value="" class="layui-input my-autocomplete-input ui-autocomplete-input"/>
3.js
$(function (){
//批发商自动提示事件
$("#dongwupici").autocomplete({
source: "autoCompeleteOfPiFaShang?dongwuzhonglei=" + $("#dongwuzhonglei").val(),
minLength: 1,
search: function (event, ui) {
//提交查询之前,动态改变source值,以传递动态参数
$("#dongwupici").autocomplete("option", { source: "autoCompeleteOfPiFaShang?rcsbDate=&dongwuzhonglei=" + $("#dongwuzhonglei").prop("value") });
},
select: function (event, ui) {
if (ui.item) {
$("#ruchangshenbaoseq").val(ui.item.rseq);
$("#pifashangid").val(ui.item.pid);
$("#pifashanglebel").val(ui.item.label);
}
},
change: function (event, ui) {
//下拉单值发生改变,如果没有选择的对象,说明用户输入有问题。
if (!ui.item) {
$("#dongwupici").val("");
$("#ruchangshenbaoseq").val("");
$("#pifashangid").val("");
$("#pifashanglebel").val("");
}
}
});
});
minLength: 1。解释为:输入一个字母就启动搜索。
3.java后端以及返回数据类型
@ResponseBody
@RequestMapping("/autoCompeleteOfPiFaShang")
public List<Map<String,Object>> autoCompeleteOfPiFaShang(String term){
if(StringUtils.isBlank(term)){
return null;
}
List<Map<String,Object>> mapList = new ArrayList<>();
term = ReplaceValueUtils.replaceValue(term.trim());
String finalTerm = term;
List<PiFaShang> list = piFaShangService.autoCompeleteOfPiFaShang(getCurrentTuzaiquId(), term, new Page<PiFaShang>(1, 15));
for (PiFaShang item : list) {
Map<String,Object> map = new HashMap<>();
map.put("label", String.format("%s(%s-%s)", item.getName(), item.getCode(), item.getAddress() == null?"":item.getAddress()));
map.put("value",item.getName());
map.put("id",item.getId());
mapList.add(map);
}
return mapList;
}
其中,label 为输入后的下拉选,选中后value会自动再input框的value中。