具有多个输入的自动完成asp.net core

问题描述 投票:0回答:1

人! 我真的需要帮助,我正在尝试在 ASP.NET Core 中使用多个输入进行自动完成,但目前我只能返回一个值。当我输入人名时我可以绑定城市,我想绑定电子邮件,部门

    [HttpPost]
    public JsonResult AutoCompletePeoples(string prefix)
    {
        var pessoas = (from pessoa in _context.Pessoas
                          where pessoa.NamePeople.StartsWith(prefix)
                          select new
                          {
                              label = pessoa.NamePeople,
                              val = pessoa.City

                          }).ToList();

        return Json(pessoas);
    }


 <script type="text/javascript">
    $(function () {
        $("#txtNomeVisitante").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Visitas/AutoCompletePeoples/',
                    data: { "prefix": request.term },
                    type: "POST",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return item;
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#txtCity").val(i.item.val);


            },
            minLength: 1
        });
    });

</script>
javascript jquery asp.net-mvc asp.net-core jquery-ui-autocomplete
1个回答
0
投票

根据你的描述,如果你想绑定其他属性,你还应该在后端选择时添加值并在自动完成选择功能中绑定它。

更多详情,您可以参考以下测试代码:

查看:

<input id="txtNomeVisitante" /> 
<hr/>
<input id="txtCity" />
<hr />
<input id="email" />
<hr />
<input id="department" />

Jquery:

    $(function () {
        $("#txtNomeVisitante").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Journey/AutoCompletePeoples/',
                    data: { "prefix": request.term },
                    type: "POST",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return item;
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                console.log(i.item.val)
                $("#txtCity").val(i.item.val);
                $("#email").val(i.item.email);
                $("#department").val(i.item.department);

            },
            minLength: 1
        });
    });

</script>

后端:

    [HttpPost]
    public JsonResult AutoCompletePeoples(string prefix)
    {

        List<Pessoas> Pessoas = new List<Pessoas>() { new Pessoas { NamePeople="Brando", City= "City1", department= "department1", email= "email1" },
        new Pessoas { NamePeople="Lucy", City= "City2", department= "department2", email= "email2" },
        new Pessoas { NamePeople="Wendy", City= "City3", department= "department3", email= "email3" },

        };

        var pessoas = (from pessoa in Pessoas
                       where pessoa.NamePeople.StartsWith(prefix)
                       select new
                       {
                           label = pessoa.NamePeople,
                           val = pessoa.City,
                           department = pessoa.department,
                           email= pessoa.email

                       }).ToList();

        return Json(pessoas);
    }
}

结果:

© www.soinside.com 2019 - 2024. All rights reserved.