Hi persons !
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 returning multiple values email, department.
Controller
[HttpPost]
public JsonResult AutoCompletePeoples(string prefix)
{
List<Visitante> visitantes = _context.Visitantes.ToList();
var pessoas = (from pessoa in _context.Visitantes
where pessoa.NamePeople.StartsWith(prefix)
select new
{
label = pessoa.NamePeople,
val = pessoa.City,
department = pessoa.Department,
email = pessoa.Email
}).ToList();
return Json(pessoas);
}
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$("#txtNamePeople").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)
$("#city").val(i.item.val);
$("#email").val(i.item.email);
$("#department").val(i.item.department);
},
minLength: 1
});
});
</script>
<form>
<input type="text" id="txtNamePeople" />
<input type="text" id="city" />
<input type="text" id="email" />
<input type="text" id="department" />
</form>
