Hi SUJAYS,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetCountries(string prefix)
{
NorthwindEntities entities = new NorthwindEntities();
var customers = (from customer in entities.Customers
where customer.Country.StartsWith(prefix)
select new
{
customer.Country
}).Distinct().ToList();
return Json(customers, JsonRequestBehavior.AllowGet);
}
public ActionResult GetCustomersByCountry(string country)
{
NorthwindEntities entities = new NorthwindEntities();
var customers = (from customer in entities.Customers
where customer.Country.StartsWith(country)
select customer).ToList();
return Json(customers, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
.ui-autocomplete {
overflow: auto;
max-height: 100px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtCustomer").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/GetCountries/',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Country,
value: item.Country
};
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
messages: {
noResults: "",
results: function (count) {
return count + (count > 1 ? ' results' : ' result ') + ' found';
}
},
select: function (e, i) {
var country = i.item.value;
$.getJSON('/Home/GetCustomersByCountry', { country: country }, function (response) {
if (response.length > 0) {
$("[id*=tblCustomers] tbody").empty();
var row;
$.each(response, function (index, item) {
row += "<tr><td>" + item.ContactName + "</td><td>" + item.City + "</td><td>" + item.Country + "</td></tr>"
})
$("[id*=tblCustomers] tbody").append(row);
}
});
},
minLength: 0
}).focus(function () {
$(this).autocomplete("search");
});
});
</script>
<div class="container">
@Html.TextBox("txtCustomer")
<table id="tblCustomers" class="table table-responsive">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
</tfoot>
</table>
</div>
</body>
</html>
Screenshot
