示例演示:
1.导入需要的文件,文件目录:
2.jsp页面中导入文件路径:
2.1获取web路径:
2.2引入文件:
3.定义输入框:
4.编写js代码:
附上部分js代码:
$("#stainfo").autocomplete({source : function(request, response) {
$.ajax({
type : "GET",
url : "${APP_PATH }/getserchinfo",
dataType : "json",
cache : false,
async : false,
data : {
stainfo : $("#stainfo").val()
},
success : function(json) {
var data = eval(json);//json数组
response($.map(data, function(item) {
var name = item.stationName;
var id = item.stationIid;
return {//自定义属性,返回后可以在select中接受使用
label : item.stationIid + '--'+ item.stationName,//下拉框显示值
value : item.stationIid+ '-->站名:'+ item.stationName,//选中后,填充到下拉框的值
id : item.stationIid//选中后,填充到id里面的值
}
}));
}
});
},
delay : 500,//延迟500ms便于输入
select : function(event, ui) {
alert(ui.item.id)
}
});
5.后台springMVC处理的代码:
附上控制器代码:
/**
* 下拉补全列表的数据
*/
@ResponseBody
@RequestMapping(value = "/getserchinfo", method = RequestMethod.GET)
public List<BaseStation> getSerchInfo(@RequestParam("stainfo") String stainfo) {
if (stainfo != null && stainfo.length() != 0) {
if (stainfo.matches("^[0-9]*$")) {
List<BaseStation> list = baseStationService.getFuzzyById(Integer.parseInt(stainfo));
return list;
} else {
return baseStationService.getFuzzyByName(stainfo);
}
}
return null;
}