Monday, July 16, 2012

jQuery UI Autocomplete with Asp.net Web Service - Server data with Client side filter


In this post Asp.Net jQuery UI Autocomplete with Asp.net Web Service - Server data with Client side filter we shall see on how populate a jQuery Autocomplete control using server side data exposed by an Asp.net web service.

In this example, the data will be initially loaded by calling the Asp.Net web service, however subsequent filters will be done at the client side.

Create an .aspx page, add a TextBox to the page and add the below jQuery script. Change the references of the jQuery library files to map to your local path.

Create an asp.net web service, add the web-method to the service, make sure that you change the name of the web-method in the jQuery script to call your web-method.


Build and run the application. Notice that the Autocomplete options are displayed using data returned from the web service.

.Aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery UI Autocomplete </title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
            // AutoComplete Server Data, Client Filter
            $.ajax({
                type: "POST",
                url: "CountriesWebService.asmx/GetCountries",
                dataType: "jsond",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                converters: {
                    "json jsond": function(msg) {
                        return msg.hasOwnProperty('d') ? msg.d : msg;
                    }
                },
                success: function(data) {
                    var datafromServer = data.split(",");
                    $("[id$='txtAutocompleteServer']").autocomplete({
                        source: datafromServer
                    });
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + XMLHttpRequest.statusText + " : " + XMLHttpRequest.status;
                    if (XMLHttpRequest.status != "0" || errorThrown != "abort") {
                        alert(errorMessage);
                    }
                }
            });
});
</script>
</head>
<body>
    <form id=" frmAutocompleterunat="server">
        <table>
            <tr>
                <td>Autocomplete Server Source, Client Filter: </td>
                <td>
                    <asp:TextBox
                        ID="txtAutocompleteServer"
                        runat="server"></asp:TextBox>
                </td>               
            </tr>
  </table>
    </form>
</body>
</html>

Web Service

namespace jQuery
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET
    AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class CountriesWebService : System.Web.Services.WebService
    {
        [WebMethod]
        public string GetCountries()
        {
            return "Belgium, Belize, Bermuda, Bolivia, Botswana, Brazil,
            Burundi, Burkina"
;
        }
    }
}

Search Flipkart Products:
Flipkart.com

No comments: