jQuery UI Autocomplete With JSON in MVC 4

In the last article jQuery Ajax GET and POST calls to Controller's Method in MVC we saw an example of a "GET call with parameter to Controller's Method which will return JSON data" (in case you missed it, go and read that before continuing here), let me put the screenshot here.

So, in this article I'm going to continue my talk to enhance that functionality and allow the autocomplete feature in that TextBox. In other words, when the user starts typing in the TextBox, autocomplete should appear and allow the user to select from it. Here is the running screenshot:

Please find the code snippets I'm using on the view page.

<p>
Enter country name @Html.TextBox("Country")
<input type="submit" id="GetCustomers" value="Submit"/>
</p>
<span id="rData"></span>
@*Don't repeat if 'jquery-1.8.2.min.js' library already referenced in _Layout.cshtml*@
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
@Styles.Render("~/Content/themes/base/css")
<script type="text/javascript">
$(document).ready(function () {
$("#Country").autocomplete({
source: function(request,response) {
$.ajax({
url: "/Home/AutoCompleteCountry",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Country, value: item.Country };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
</script>

In the code above, I have created a TextBox using Razor syntax, also placed the references of required libraries to run the jQuery Autocomplete. I have attached the autocomplete functionality with "Country" ID and then made an Ajax call to Home controller's AutoCompleteCountry method with the parameter term: "request.term", this method will return JSON data. The JSON data returned by the AutoCompleteCountry method will be used to create the autocomplete unordered list and displayed to the user.

Now, here is the code of AutoCompleteCountry method that will accept a parameter and return the matching JSON data:

public JsonResult AutoCompleteCountry(string term)
{
var result = (from r in db.Customers
where r.Country.ToLower().Contains(term.ToLower())
select new { r.Country }).Distinct();
return Json(result, JsonRequestBehavior.AllowGet);
}

As you can see, I'm using a LINQ query to filter the country. See how Autocomplete and Ajax sends the request to the AutoCompleteCountry method on each char typing. I'm using the Firebug extension installed in Chrome.

Hope this helps.

3 Comments

Join the conversation! Your thoughts help the community grow.

kalpesh parakh10y ago
Is there a way to persist the autocomplete text and value after postback. I am thinking of reinitializarion of autocomplete but cannot get a hold of it, please suggest.
sreenivasa k11y ago
nice article. how to be a MVP in microsoft. please suggest
- kalpesh parakh10y ago
  Is there a way to persist the autocomplete text and value after postback. I am thinking of reinitializarion of autocomplete but cannot get a hold of it, please suggest.