Sep 11, 2011

Integrating jQuery UI Autocomplete in ASP.NET web application

Import jquery and jQueryUI and related CSS



bind autocomplete with asp.net textbox control
$(document).ready(function () {
            $("#<%=txtAutoComplete.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "webservice/TestService.asmx/SearchData",
                        data: "{ 'q': '" + request.term + "', 'limit': '10' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.id + ""
                                }
                            }))
                        }
                    });
                }
            });
});
Declare web method inside web service
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
        public List SearchData(string q, int limit)
        {
            return new List { new tdata { id = 0, name = "nitin" } };
        }

        public class tdata
        {
            public string name { get; set; }
            public int id { get; set; }
        }