AJAX autocomplete 動態補全從資料庫載入資料
阿新 • • 發佈:2019-02-05
//根據工號查詢 $("#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; @Controller public class ManagerConter { @Autowired SearchAttendanceManagementService searchAttendanceManagementServiceImpl; @Autowired CommonBaseDao 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(){ } }