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>

Brando Zhang · Accepted Answer · 2024-03-07 09:10:04Z

0

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:

answered Mar 7, 2024 at 9:10

Brando Zhang

29.1k6 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tiago Procópio Over a year ago

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

Brando Zhang Over a year ago

What's the Email and CPE value you have put to the client?

Tiago Procópio Over a year ago

in javaScript $("#email").val(i.item.email); $("#cpf").val(i.item.cpf);

Tiago Procópio Over a year ago

Brando Zhang,Thanks a lot for the help ..the full code is above

Brando Zhang Over a year ago

I want to know the backend class Visitante make up

|

Tiago Procópio · Accepted Answer · 2024-03-10 20:07:32Z

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>

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Autocomplete with multiple inputs asp.net core

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related