Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Autocomplete textbox in asp.net using jQuery

Article:
Viewed:  1589 
Posted On:  08/10/2014 11:03:39 
How we can implement autocomplete text box in asp.net using jQuery ? 

Here in this article I am going to explain how we can implement Autocomplete text box in ASP.NET using jQuery.

Below is my Data Table from which I am showing Employee Name:

1.png

Image 1.

Records in my Data Table are:

Here I will show Employee Name as autocomplete text box

2.png

Image 2.

Now my aspx code is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AutoComplete Text Box using jQuery in ASP.NET</title>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(document).ready(function() {
          $("#txtEmpName").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetEmployeeName",
                        data: "{'empName':'" + document.getElementById('txtEmpName').value + "'}",
                        dataType: "json",
                        success: function(data) {
                            response(data.d);
                        },
                        error: function(result) {
                            alert("No Match");
                        }
                    });
                }
            });
        });         
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="10" cellspacing="10" style="border: solid 15px Green; background-color: SkyBlue;"
        width="50%" align="center">
        <tr>
            <td>
                <span style="color: Red; font-weight: bold; font-size: 18pt;">Enter Employee Name:</span>&nbsp;
                <asp:TextBox ID="txtEmpName" runat="server" Width="160px" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
 
Now my aspx.cs code is:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;
using System.Data.SqlClient;
using System.Collections.Generic;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
 
    [WebMethod]
    public static List<string> GetEmployeeName(string empName)
    {
        List<string> empResult = new List<string>();
        using (SqlConnection con = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated Security=true;Initial Catalog=Test"))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select Top 10 EmployeeName from Employee where EmployeeName LIKE ''+@SearchEmpName+'%'";
                cmd.Connection = con;
                con.Open();
                cmd.Parameters.AddWithValue("@SearchEmpName", empName);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    empResult.Add(dr["EmployeeName"].ToString());
                }
                con.Close();
                return empResult;
            }
        }
    }
}
 
Now Run the Application:

Here type some letter and see Employee Name List:

3.png

Image 3.

4.png

Image 4.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us