JQuery ajax autocomplete extender textbox using json response type

 

JQuery ajax autocomplete extender textbox using json response type

In this post we will discuss about how to implement autocomplete functionality for counties textbox by using jquery, jqueryui, jquery ajax and response type json.

 

Code:

Add reference to the jquery ui css, jquery and jquery ui.

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Bind autocomplete functionality to textbox in document.ready event.

<script language="javascript">

    $(document).ready(function () {

        $("#<% =txtCountry.ClientID%>").autocomplete({

            source: function (request, response) {

                $.ajax({

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    url: "default.aspx/LoadCountry",

                    data: "{input:'" + request.term + "'}",

                    dataType: "json",

                    success: function (output) {

                        response(output.d);

                    },

                    error: function (errormsg) {

                        alert(errormsg.responseText);

                    }

                });

            }

        });

    });

</script>

  

in the above code url we have mentioned as "default.aspx/LoadCountry" where default.aspx is page name and LoadCountry is the web method name which returns the JSON result set.

Data we have given as -> data: "{input:'" + request.term + "'}". Where input is the parameter name in the C# web method. and request.term will pass the value we entered in the textbox.

And if the ajax method successfully executed then it will call the success method if any error is there then error method will be raised in the above code.

Now write the C# web method 

Add name space -> using System.Web.Services;

[WebMethod]

public static List<string> LoadCountry(string input)

{

    //Get the countries list from database, for this example I am creating sample output

    //return GetCountriesfromDB(input);

    return GetCountries().FindAll(item => item.ToLower().Contains(input.ToLower()));

}

public static List<string> GetCountries()

{

        List<string> CountryInformation = new List<string>();

        CountryInformation.Add("India");

        CountryInformation.Add("United States");

        CountryInformation.Add("United Kingdom");

        CountryInformation.Add("Canada");

        CountryInformation.Add("South Korea");

        CountryInformation.Add("France");

        CountryInformation.Add("Mexico");

        CountryInformation.Add("Russia");

        CountryInformation.Add("Australia");

        CountryInformation.Add("Turkey");

        CountryInformation.Add("Kenya");

        CountryInformation.Add("New Zealand");

        return CountryInformation;

}

To declare web method LoadCountry, we have to specify the access specifier as public and static. and add [WebMethod] attribute.

In the above code GetCountries() method used to prepare the sample data, you can replace this with the original data.

Now execute the solution to get the output as shown in the above image.... 

you can download the source code form here... Download Code

Reference:-Examples With Code