1. 程式人生 > >AJAX autocomplete 動態補全從資料庫載入資料

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;

@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(){
	}
}