Jitesh Byahut 2/26/2014 3942

How To Use Autocomplete Using Jquery Ajax In Asp.Net

Here we are using JQuery autocomplete in Asp.Net

<title>JQuery-autocomplete</title>

    <script src="../../Scripts/Jquery-ui/js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="../../Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>

    <link href="../../Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

    <script type="text/javascript">

        $(document).ready(function () {

           

            $("#txtauto").autocomplete({

                source: function (request, response) {

                    $.ajax({

                        type: "POST",

                        url: "http://localhost:49258/Asphelps/JQuery/test/Autocomplete.aspx/FillData",

                        data: "{'search':'"+$("#txtauto").val()+"'}",

                        dataType: "json",

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

                        success: function (data) {

                           response(data.d);

                        },

                        error: function (data) {

                            alert("error found");

                        }

                    });

                }

            });

 

        });

    </script>

</head>

<body>

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

    <div>

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

    </div>

    </form>

</body>

</html>

using System.Web.Services;

 

public partial class JQuery_Autocomplete : System.Web.UI.Page

{

   

    protected void Page_Load(object sender, EventArgs e)

    {

       

    }

 

    [WebMethod]

    public static List<string> FillData(string search)

    {

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

        DataTable dt = new DataTable();

        SqlConnection con = new SqlConnection(@"Data Source=JITESH-PC\SQL;Initial Catalog=db_Student;Integrated Security=True");

        SqlDataAdapter da = new SqlDataAdapter("Select Name from tbl_students where Name like '%"+search+"%'", con);

        con.Open();

        da.Fill(dt);

        con.Close();      

 

        if (dt.Rows.Count > 0)

        {

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                lists.Add(Convert.ToString(dt.Rows[i]["Name"]));

            }

        }

 

        return lists;

    }

}

How to use Jquery autocomplete without using ajax in Asp.Net

Here we are using Jquery autocomplete in Asp.Net

<script type="text/javascript">

        $(document).ready(function () {

           

            var item = '<%=this.data%>';

            var lists = new Array();

            lists = item.split(',');

            $("#txtauto").autocomplete({

                source:lists

            });

        });

    </script>

public partial class JQuery_Autocomplete : System.Web.UI.Page

{

    public string data;

 

    protected void Page_Load(object sender, EventArgs e)

    {

        FillData();

    }

 

 

    public void FillData()

    {

        DataTable dt = new DataTable();

        SqlConnection con = new SqlConnection(@"Data Source=JITESH-PC\SQL;Initial Catalog=db_Student;Integrated Security=True");

        SqlDataAdapter da = new SqlDataAdapter("Select Name from tbl_students", con);

        con.Open();

        da.Fill(dt);

        con.Close();

 

        if (dt.Rows.Count > 0)

        {

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                data += (Convert.ToString(dt.Rows[i]["Name"])) + ",";               

            }

        }

    }

}

View output :

demoimage


Please give your feedback for improving this page