1. 程式人生 > >Mvc使用自動完成外掛autocomplete獲取遠端資料

Mvc使用自動完成外掛autocomplete獲取遠端資料

 

 首先引用樣式: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);
        }