Mvc使用自动完成插件autocomplete获取远程数据

最新推荐文章于 2021-08-27 22:42:38 发布

ao123056

最新推荐文章于 2021-08-27 22:42:38 发布

阅读量675

点赞数

分类专栏： JS .Net 文章标签：自动完成 jquery自动填充

本文链接：https://blog.csdn.net/ao123056/article/details/81097107

版权

.Net 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

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