Mvc使用自動完成外掛autocomplete獲取遠端資料
阿新 • • 發佈:2019-01-11
首先引用樣式:jquery-ui.js 和jquery-ui.css
$("#txtSerach").autocomplete({ minLength: 0, source: "/Home/GetEmpDetail", //滑鼠覆蓋事件 focus: function (event, ui) { $("#txtSerach").val(ui.item.Name); return true; }, //選中事件 select: function (event, ui) { $("#txtSerach").val(ui.item.Name); $("#EmpCode").html(ui.item.Code); $("#TelLong").html(ui.item.Telephone); $("#Mobile").html(ui.item.Mobile); $("#Email").html(ui.item.Email); $("#FirstDep").html(ui.item.Dept1Name); $("#SecDep").html(ui.item.Dept2Name); $("#ThirdDep").html(ui.item.Dept3Name); $("#Housing").html(ui.item.OfficialHousing); $("#Name").html(ui.item.Name); $("#myModal").modal('show'); return false; } }) //查詢出的資料返回樣式 .data("ui-autocomplete")._renderItem = function (ul, item) { return $("<li class='form-control' >") .append("<a>" + item.Name + "|" + item.Code + "</a>") .appendTo(ul); };
後臺controller方法,前臺查詢的引數後臺預設是用“term”欄位接收,然後使用這個欄位取篩選自己需要的資料,用json格式返回即可
public JsonResult GetEmpDetail() { string q = Request.QueryString["term"].ToString(); IEmpQueryService api = ComApiBase.CreateApi<IEmpQueryService>(); var list = api.GetEmpDetail(q).Result.Data; return Json(list, JsonRequestBehavior.AllowGet); }