Autocomplete textbox using jquery in asp.net

 

 

 


 

 

 How to implement an auto-complete text box in ASP.NET using jQuery. 

 This example is for based on employee name. we can auto populate the user names based on like key   word search in textbox.

 Below is the Default.aspx code

    <%@ 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() {  
                SearchText();  
            });  
            function SearchText() {  
                $("#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>
     
    Below is the Default.aspx.cs code
     
    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=server;Integrated Security=true;Initial Catalog=DemoTest"))  
            {  
                using (SqlCommand cmd = new SqlCommand())  
                {  
                    cmd.CommandText = "select Top 100 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;  
                }  
            }  
        }  
    }
     
      
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <table cellpadding="10" cellspacing="10" style="border: solid 15px Green; background-color: Blue;"  
            width="50%" align="center">  
            <tr>  
                <td>  
                    <span style="color: Red; font-weight: bold; font-size: 18pt;"> EmpName:</span>   
                    <asp:TextBox ID="txtEmpName" runat="server" Width="160px" />  
                </td>  
            </tr>  
        </table>  
        </form>  
    </body>  
    </html>  

 

DOT NET ADDA

interested in solving the problems based on technologies like Amazon AWS ,Google Cloud, Azure and Dot related technology like asp.net, C#, asp.net core API, swagger, react js,Jquery ,javascripts, bootstrap, css,html, ms sql,IIS,WPF ,WCF,Firebase,RDLC Report etc..

إرسال تعليق (0)
أحدث أقدم