Hi tprocopio,
Use String.Format to send multiple value and process it in the Ajax Success event handler by spliting it.
Check this example. Now please take its reference and correct your code.
For more details on implementing jQuery AutoComplete in ASP.Net Core please refer jQuery AutoComplete TextBox in ASP.Net Core MVC.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
DBContext
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<Customer> Customers { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AutoCompleteCustomers(string prefix)
{
var customers = (from customer in this.Context.Customers
where customer.ContactName.StartsWith(prefix)
select new
{
label = customer.ContactName,
val = string.Format("{0}-{1}-{2}", customer.CustomerID, customer.City, customer.Country)
}).ToList();
return Json(customers);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<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 () {
$("#txtName").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/AutoCompleteCustomers/',
data: { "prefix": request.term },
type: "POST",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.label,
val: item.val.split('-')[0],
city: item.val.split('-')[1],
country: item.val.split('-')[2]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#txtCustomerId").val(i.item.val);
$("#txtCity").val(i.item.city);
$("#txtCountry").val(i.item.country);
},
minLength: 1
});
});
</script>
<form>
<table class="table">
<tr>
<td>Name:</td>
<td> <input type="text" id="txtName" class="form-control" /></td>
</tr>
<tr>
<td>Customer Id:</td>
<td><input type="text" id="txtCustomerId" class="form-control" /></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" id="txtCity" class="form-control" /></td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text" id="txtCountry" class="form-control" /></td>
</tr>
</table>
</form>
</body>
</html>
Screenshot
