Autocomplete with multiple inputs asp.net core

Question

person! I really need help, I'm trying to do an Autocomplete with multiple inputs in ASP.NET Core, but at the moment I'm only able to return one value. When I enter the person's name I can bind the city, I would like to bind email, department

    [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>

Answer 1

According to your description, if you want to bind other property, you should also add the value when selecting from the backend and bind it inside the autocomplete select function.

More details, you could refer to below test codes:

View:

<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>

Backend:

    [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);
    }
}

Result:

Answer 2

Brando Zhang,Thanks a lot for the help !!! But the problem continues, I can only return the "Celular" field that is in val] I would like it to return the other values

[HttpPost] public JsonResult AutoCompletePeoples(string prefix) {

List<Visitante> visitantes = _context.Visitantes.ToList();


var pessoas = (from pessoa in _context.Visitantes
               where pessoa.NomeVisitante.StartsWith(prefix)
               select new
               {
                   label = pessoa.NomeVisitante,
                   val = pessoa.Celular,
                   CPF = pessoa.CPF,
                   email = pessoa.Email

               }).ToList();

return Json(pessoas);

}

<script type="text/javascript">
    $(function () {
        $("#txtNomeVisitante").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Home/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)           
            $("#celular").val(i.item.val);            
            $("#email").val(i.item.email);
            $("#cpf").val(i.item.cpf);
            },
            minLength: 1
        });
    });

</script>