Jquery - Autocomplete with multiple inputs asp.net core

TiagoProc243pio
March 9, 2024
222 views
1 vote
2 Answers

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>

Answers

Chosen as BEST ANSWER

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> countries = _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);
              
                $("#cpf").val(i.item.CPF);

                $("#email").html(i.item.Email);

            },
            minLength: 1
        });
    });

</script>

(Edit)

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:

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Autocomplete with multiple inputs asp.net core

Answers