AJAX autocomplete 动态补全从数据库加载数据

//根据工号查询
$("#se").change(function() {
if ($("#se").val() == "2") {
$("#auctionName").autocomplete({
source : function(request, response) {
//setTimeout(function() {
$.ajax({
//提交数据的类型 POST GET
type : "GET",
//提交的网址
url : "getDeptName",
//提交的数据
data : {
jsondata : $("#auctionName").val()
},
//async : false,
cache : false,
//返回数据的格式
datatype : "JSON",
//成功返回之后调用的函数
success : function(data) {
response($.map(data, function(item) {
return { //lable为下拉列表显示数据源。value为选中放入到文本框的值，这种方式可以自定义显示
lable : item.deptname,
value : item.deptname
};
}));
},
//调用出错执行的函数
error : function() {
alert("异常");
}

});
//	}, 1000);

},
messages : {
noResults : '',
results : function() {
}
}
});

} else {
$("#auctionName").autocomplete({
mustMatch : true,
cacheLength : 10,
source : function(request, response) {
},

noResults : '',
results : function() {
}
});

}
});

引入的样式(自行下载)

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jqueryui/jquery.ui.core.js"></script>
<script src="js/jqueryui/jquery.ui.widget.js"></script>
<script src="js/jqueryui/jquery.ui.autocomplete.js"></script>
<script src="js/jqueryui/jquery.ui.menu.js"></script>
<script src="js/jqueryui/jquery.ui.position.js"></script>

后台代码

import java.io.UnsupportedEncodingException;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.oupai.common.CommonBaseDao;import com.oupai.entity.UDepartment;import com.oupai.entity.VAttdailyreport;import com.oupai.service.SearchAttendanceManagementService;import com.oupai.util.QueryCriteria;@Controllerpublic class ManagerConter {@AutowiredSearchAttendanceManagementService searchAttendanceManagementServiceImpl;@AutowiredCommonBaseDao aaa;/**** @param id* @param stratTime*            开始时间* @param endTime*            结束时间* @param empNo*            员工编号* @param mode*            mode存储对象 requerset application* @return*/@RequestMapping("/getList")public String search(String id, String stratTime, String endTime,String empNo, String searchType, ModelMap mode) {QueryCriteria q = new QueryCriteria();q.setCommonAttributeOne(id);q.setCommonAttributeTow(stratTime);q.setCommonAttributeThree(endTime);// 按工号查询if(searchType==null){searchType="1";}if (searchType.equals("1")) {@SuppressWarnings("unchecked")List<VAttdailyreport> va = searchAttendanceManagementServiceImpl.searchAttendanceManagement(q);mode.addAttribute("list", va);} else if (searchType.equals("2")) {// 按部门查询@SuppressWarnings({ "unchecked", "unchecked" })List<VAttdailyreport> de = searchAttendanceManagementServiceImpl.byDeptNamesearchAttendanceManagementInfo(q);mode.addAttribute("list", de);}mode.addAttribute("empNo", empNo);return "index";}//自动补全@RequestMapping("/getDeptName")@ResponseBody// 将会把返回值 转换为Json对象public List<UDepartment> json(HttpServletRequest request,HttpServletResponse resp) throws UnsupportedEncodingException {System.out.println("start"+System.currentTimeMillis());List<UDepartment> list = searchAttendanceManagementServiceImpl.showDeptName(new String(request.getParameter("jsondata").getBytes("ISO-8859-1"), "UTF-8"));System.out.println("end"+System.currentTimeMillis());System.out.println(list);return list;}@RequestMapping("/view")public void  aaaa(){}}