How to use jQuery AutoComplete Plugin for TextBox inside ASP.Net GridView control

ellurgur...

SOLVED CLOSED ACTIVE ANSWERED
User: ellurguru
Posted: on Aug 16, 2012 02:05 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 13345

Hi sir,

In my project i am going to implement gridview control and inside gridview create textbox control

and developing jquery auto complete textbox.when user enter alphabets in textbox,the alphabets related values fetching from database via webservice.Please help me

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
using System.Web.Script.Services;

/// <summary>
/// Summary description for Service
/// </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 Service : System.Web.Services.WebService {

    public Service () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string[] GetCustomers(string prefix)
    {
        List<string> customers = new List<string>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .AppSettings["connectionstring"].ToString();
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select UserName, Id from UserInfo where " +
                "UserName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefix);
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(string.Format("{0}-{1}", sdr["UserName"], sdr["Id"]));
                    }
                }
                conn.Close();
            }
            return customers.ToArray();
        }
    }
    
}

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
using System.Web.Script.Services;

/// <summary>
/// Summary description for Service
/// </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 Service : System.Web.Services.WebService {

    public Service () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string[] GetCustomers(string prefix)
    {
        List<string> customers = new List<string>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .AppSettings["connectionstring"].ToString();
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select UserName, Id from UserInfo where " +
                "UserName like @SearchText + '%'";
                cmd.Parameters.AddWithValue("@SearchText", prefix);
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(string.Format("{0}-{1}", sdr["UserName"], sdr["Id"]));
                    }
                }
                conn.Close();
            }
            return customers.ToArray();
        }
    }
    
}

Mudassar

0 2

Reply
ANSWER
User: Mudassar
Replied: on Aug 16, 2012 08:06 AM
Report

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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 () {
        $("[id*=txtSearch]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
                    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) {
                $("[id*=hfCustomerId]", $(e.target).closest("td")).val(i.item.val);
            },
            minLength: 1
        });

    }); 
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
    <Columns>
    <asp:BoundField DataField = "Name" />
    <asp:TemplateField>
        <ItemTemplate>
         <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <asp:HiddenField ID="hfCustomerId" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
   
    <br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick = "Submit" />
    </form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Age") });
            dt.Rows.Add("John", "12");
            dt.Rows.Add("Sam", "42");
            dt.Rows.Add("Mike", "31");
            dt.Rows.Add("Jerry", "19");
            dt.Rows.Add("Thomas", "77");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }
    protected void Submit(object sender, EventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            string customerName = Request.Form[row.FindControl("txtSearch").UniqueID];
            string customerId = Request.Form[row.FindControl("hfCustomerId").UniqueID];
        }
    }

How to use jQuery AutoComplete Plugin for TextBox inside ASP.Net GridView control

Company

Explore

Follow us

Contact Us