jQuery UI Autocomplete with JSON in MVC 4

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

So, in this post I’m going to continue my talk to enhance that functionality and allow autocomplete feature in that textbox. Means, when 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 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 above code, I have created a textbox using Razor syntax also placed the references of required libraries to run jQuery Autocomplete. I have attached the autocomplete functionality with ‘Country’ ID and then making an Ajax call to Home controller’s AutoCompleteCountry method with 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 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 linq query to filter the country. See how Autocomplete and Ajax sending the request to AutoCompleteCountry method on each char typing. I’m using Firebug extension installed in Chrome.

Hope this helps.