Menu ▼



Posted By :
avatarmrkraju
Total Views : 3026

JQuery ajax autocomplete extender textbox using XML response type

In this post we will discuss how to use XML response for JQuery UI autocomplete extender. To make jquery ui autocomplete extender work with xml, after getting the xml resultset we have to convert it to Array.

Example

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) {
                        var myArr = new Array();
                        $(output.d).find("Country").each(function () {
                            myArr.push($(this).text());
                        });
                        response(myArr);
                    },
                    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 XML result set (we are writing for each loop on the xml and adding the countries in the xml to array variable myArr).

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(input);

}

public static string GetCountries(string input)
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    dt.Columns.Add("Country");
    dt.Rows.Add("India");
    dt.Rows.Add("United States");
    dt.Rows.Add("United Kingdom");
    dt.Rows.Add("Canada");
    dt.Rows.Add("South Korea");
    dt.Rows.Add("France");
    dt.Rows.Add("Mexico");
    dt.Rows.Add("Russia");
    dt.Rows.Add("Australia");
    dt.Rows.Add("Turkey");
    dt.Rows.Add("Kenya");
    dt.Rows.Add("New Zealand");
    dt.DefaultView.RowFilter = "Country like '%" + input + "%'";
    ds.Tables.Add(dt.DefaultView.ToTable());
    return ds.GetXml();
}

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






comments powered by Disqus


Search dotnetlearners.com