autocomplete自动补全工具完整版使用（springMVC后台）

示例演示：

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;
	}