Monday, July 16, 2012

jQuery UI Autocomplete with Asp.net Web Service returning List Object – Service data with server filter.


In this post Asp.Net jQuery UI Autocomplete with Asp.net Web Service returning List Object we shall see on how populate a jQuery Autocomplete control using server side data exposed by an Asp.net web service, where the web service returns a LIST object.

In this example, the data will be initially loaded by calling the Asp.Net web service, also the subsequent filters will be done in the server side, the letters types by the user will be sent to the web-method and the filtering will happen at the server 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, Server Filter (List)
            $("#txtAutocompleteServerList").autocomplete
            ({
                source: function(request, response) {
                    $.ajax({
                        type: "POST",
                        url: "CountriesWebService.asmx/GetCountryList",
                        dataType: "json",
                        data: "{ 'filterKey': '" + request.term + "' }",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function(data) { return data; },
                        success: function(data) {
                            response($.map(data.d, function(item) {
                                return { value: item}
                            }))
                        },
                        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);
                            }
                        }
                    });
                },
                delay: 100
            });
});
</script>
</head>
<body>
    <form id=" frmAutocompleterunat="server">
        <table>
<tr>
<td>Autocomplete Server Source, Server Filter (List): </td>
                <td>
                    <asp:TextBox
                        ID="txtAutocompleteServerList"
                        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 List<string> GetCountryList(string filterKey)
        {
            List<string> lstCountry = new List<string>();
            string strCountryList = string.Empty;
            //
            lstCountry.Add("Albania");
            lstCountry.Add("Algeria");
            lstCountry.Add("Andorra");
            lstCountry.Add("Angola");
            lstCountry.Add("Anguilla");
            lstCountry.Add("Antarctica");
            lstCountry.Add("Argentina");
            lstCountry.Add("Armenia");
            lstCountry.Add("Aruba");
            lstCountry.Add("Belgium");
            lstCountry.Add("Belize");
            lstCountry.Add("Bermuda");
            lstCountry.Add("Bolivia");
            lstCountry.Add("Botswana");
            lstCountry.Add("Brazil");
            lstCountry.Add("Burundi");
            lstCountry.Add("Burkina");
            //
            var filteredCountries = from c in lstCountry
            where c.StartsWith(filterKey)
            select c;
            //
            return filteredCountries.ToList();
        }
    }
}

For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Autocomplete Tutorial


Related Posts


Search Flipkart Products:
Flipkart.com

No comments: