ASP.NET jQuery UI : AutoComplete with DataTable via webservice

ASP.NET jQuery UI : AutoComplete with DataTable via webservice

This project can convert DataTable to jQuery AutoComplete DataSource.
We can get Data from DataBase and create to jQuery Datasource and display in webpage via webservice.
now we have 4 step to do this.

DownLoad Demo Here

Step 1: Add css and script

Add scriptmanager to yourpage.
Add jquery-ui.css.
Add jquery.js
Add jquery-ui.js

Step 2: Add Control to yourpage

Add scriptmanager to yourpage.
Add TextBox named to txtCustomerSearch.
Add Image for loading named to imgLoading.

        ScriptManager
        txtCustomerSearch
        imgLoading
    

Step 3: Add Javascript

Add scriptmanager to yourpage.
Add TextBox named to txtCustomerSearch.
Add Image for loading named to imgLoading.

    $(function () {
        $("#<%=txtCustomerSearch.ClientID %>").autocomplete({
            minLength: 2,
            source: function (req, response) {
                $("#<%=imgLoading.ClientID %>").show();
                $.ajax({
                    url: "WebService.asmx/GetCustomerData",
                    data: "{ 'SearchValue': '" + $("#<%=txtCustomerSearch.ClientID %>").val() + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        $("#<%=imgLoading.ClientID %>").hide();
                        atcjq.onsuccess(data, response);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $("#<%=imgLoading.ClientID %>").hide();
                        
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            select: function (event, ui) {
                $("#<%=txtCustomerSearch.ClientID %>").val(ui.item.txtvalue)
                $("#<%=txtCustomerSearch.ClientID %>").attr("title", ui.item.txtvalue);
                atcjq.seturisearch();
                return false;
            }
        });
    });
    var atcjq = {
        onsuccess: function (data, response) {
            var d2 = Sys.Serialization.JavaScriptSerializer.deserialize(data.d);
            response($.map(d2, function (item) {
                var fval = item.CustomerName;
                return {
                    value: fval, label: fval, txtvalue: item.CustomerName
                }
            }))
        },
        seturisearch: function () {
            //alert($("#<%=txtCustomerSearch.ClientID %>").val());
        }
    }
    

Step 4: Using ConvertDataTableToJson to convert your datatable to json and send to html.

        Public Function ConvertDataTableToJson(ByVal dt As DataTable) As String
            Dim serializer As System.Web.Script.Serialization.JavaScriptSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
            Dim rows As New List(Of Dictionary(Of String, Object))
            Dim row As Dictionary(Of String, Object)

            For Each dr As DataRow In dt.Rows
                row = New Dictionary(Of String, Object)
                For Each col As DataColumn In dt.Columns
                    row.Add(col.ColumnName, dr(col))
                Next
                rows.Add(row)
            Next
            Return serializer.Serialize(rows)
        End Function
    

Download Demo Here

Don't hesitate to email me zomdev.