Auto complete TextBox in asp.net using JQuery.

Introduction:-

In this article , I have explained Auto complete textbox in asp.net using Jquery.

DataBase:-

Create table  Customers(CustomerId int,ContactName varchar(max);

Insert some dummy data in this table.

Open Visual studio -> create new website.

Add one web service file in this project.

WebService.cs:-

using System;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

using System.IO;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Web.Script.Services;

/// <summary>

/// Summary description for WebService

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// 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 WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components

        //InitializeComponent();

    }

    [WebMethod]

    [ScriptMethod(ResponseFormat=ResponseFormat.Json)]

    public string[] GetCustomer(string prefix)

    {

        List<string> customer = new List<string>();

        using (SqlConnection con = new SqlConnection())

        {

            con.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

            using (SqlCommand cmd = new SqlCommand())

            {

                cmd.CommandText = "Select CustomerId,ContactName from Customers where " + "ContactName like @SearchText +'%'";

                cmd.Parameters.AddWithValue("@SearchText", prefix);

                cmd.Connection = con;

                con.Open();

                using (SqlDataReader dr = cmd.ExecuteReader())

                {

                    while (dr.Read())

                    {

                        customer.Add(string.Format("{0}-{1}", dr["ContactName"], dr["CustomerId"]));

                    }

                }

                con.Close();

            }

            return customer.ToArray();

        }

    }

   

}

Design Page:-

Put one textbox on design page.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:HiddenField ID="hfCustomerid" runat="server" />

Jquery Code:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"

type = "text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"

type = "text/javascript"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />

<script type="text/javascript">

    $(document).ready(function () {

        $("#<%=TextBox1.ClientID %>").autocomplete({

            source: function (request, response) {

                $.ajax({

                    url: '<%=ResolveUrl("~/WebService.asmx/GetCustomer") %>',

                    data: "{ 'prefix': '" + request.term + "'}",

                    dataType: "json",

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    success: function (data) {

                        response($.map(data.d, function (item) {

                            return {

                                label: item.split('-')[0],

                                val: item.split('-')[1]

                            }

                        }))

                    },

                    error: function (response) {

                        alert(response.responseText);

                    },

                    failure: function (response) {

                        alert(response.responseText);

                    }

                });

            },

            select: function (e, i) {

                $("#<%=hfCustomerid.ClientID %>").val(i.item.val);

            },

            minLength: 1

        });

    });

</script>

Fullcode:-

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"

type = "text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"

type = "text/javascript"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" />

<script type="text/javascript">

    $(document).ready(function () {

        $("#<%=TextBox1.ClientID %>").autocomplete({

            source: function (request, response) {

                $.ajax({

                    url: '<%=ResolveUrl("~/WebService.asmx/GetCustomer") %>',

                    data: "{ 'prefix': '" + request.term + "'}",

                    dataType: "json",

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    success: function (data) {

                        response($.map(data.d, function (item) {

                            return {

                                label: item.split('-')[0],

                                val: item.split('-')[1]

                            }

                        }))

                    },

                    error: function (response) {

                        alert(response.responseText);

                    },

                    failure: function (response) {

                        alert(response.responseText);

                    }

                });

            },

            select: function (e, i) {

                $("#<%=hfCustomerid.ClientID %>").val(i.item.val);

            },

            minLength: 1

        });

    });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:HiddenField ID="hfCustomerid" runat="server" />

    </div>

    </form>

</body>

</html>

Download  code.