September 1, 2016

Autocomplete Jquery in .net

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <script src="js/jquery-1.10.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <link href="css/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("#<%=txtLocation.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/SearchLocation.asmx/SearchLocation")%>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data.d.length > 0) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.split('-')[0],
                                        val: item.split('-')[1]
                                    };
                                }))
                            } else {
                                response([{ label: 'No results found.', val: -1 }]);
                            }
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, u) {
                    if (u.item.val == -1) {
                        return false;
                    }
                    else {
                        $("#<%=hfLocation.ClientID %>").val("");
                        $("#<%=hfLocation.ClientID %>").val(u.item.val);
                    }
                },
                minLength: 1
            });
        });
    </script>

   <asp:TextBox ID="txtLocation" runat="server" MaxLength="60"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />


Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Data.SqlClient
Imports System.Collections.Generic

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<ScriptService()> _
Public Class SearchLocation
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Function SearchLocation(ByVal prefix As String) As String()
        Dim customers As New List(Of String)()
        Using conn As New SqlConnection()
            conn.ConnectionString = ConfigurationManager.ConnectionStrings("connString").ConnectionString
            Using cmd As New SqlCommand()
                cmd.CommandText = "SELECT City,City FROM Ghms_Master_City WHERE Status = 1 and city like @SearchText + '%' ORDER BY 1"
                'cmd.CommandText = "select ContactName, CustomerId from Customers where " & "ContactName like @SearchText + '%'"
                cmd.Parameters.AddWithValue("@SearchText", prefix)
                cmd.Connection = conn
                conn.Open()
                Using sdr As SqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        customers.Add(String.Format("{0}-{1}", sdr("City"), sdr("City")))
                    End While
                End Using
                conn.Close()
            End Using
            Return customers.ToArray()
        End Using
    End Function

End Class

No comments: