将Jquery自动完成到GridView中的文本框

时间:2012-04-23 12:35:02

标签: jquery asp.net gridview jquery-autocomplete

我希望在网格中的textvox中添加自动完成功能,但是,我无法从脚本中调用文本框。

HTML代码

<head runat="server">
<title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdUserTrans" CellSpacing="1" runat="server" 
Width="100%">                                                                
<Columns>
<asp:BoundField HeaderText="" DataField="ID" SortExpression="ID" 
ItemStyle-HorizontalAlign="Center"></asp:BoundField>
<asp:BoundField HeaderText="Register Number" DataField="REGNO" 
ItemStyle-HorizontalAlign="Left"></asp:BoundField>
<asp:BoundField HeaderText="Name" DataField="USERNAME" 
ItemStyle-HorizontalAlign="Left"></asp:BoundField>
<asp:TemplateField HeaderText="Stop Name" ControlStyle-CssClass="radionobrdr"
ItemStyle-VerticalAlign="Top" HeaderStyle-HorizontalAlign="Center" 
ItemStyle-HorizontalAlign="Center">
<ItemTemplate><asp:TextBox ID="txtClass" runat="server" CssClass="TextBox">  
</asp:TextBox></ItemTemplate>
</asp:TemplateField></Columns></asp:GridView>
</div>
</form>
</body>
</html>

JS代码是

<script type="text/javascript">
$(document).ready(function() {
    $("#<%=grdUserTrans.ClientID%>").find(".TextBox").autocomplete('Search_CS.ashx');
});       
</script>

Search_CS文件是

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Script.Services;
using System.Collections.Specialized;
using System.Data;

public class Search_CS : IHttpHandler {

public void ProcessRequest (HttpContext context) {
    string prefixText = context.Request.QueryString["q"];
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = 
ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "SELECT KSM_STOP_NAME FROM KSL_STOP_MST WHERE
 KSM_STOP_NAME LIKE '%" + prefixText + "%'";
                cmd.Connection = conn;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(sdr["KSM_STOP_NAME"])
                            .Append(Environment.NewLine);
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }

}

public bool IsReusable {
    get {
        return false;
    }
}
}

连接字符串是

<connectionStrings>
<add name="constr" connectionString="Data Source=KACPER-SERVER;Initial  
Catalog=KED_MACAULAY;Integrated Security=false;uid=KACPER_SQL;pwd=KACPER_SQL123;
pooling=true;connect timeout=900;max pool size=200"/>
</connectionStrings>

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

谢谢大家......找到了代码..脚本代码应该是这样的

<script type="text/javascript"> $(document).ready(function() { $("*[id$=grdUserTrans] 
input[id$=txtClass]").autocomplete('Search_CS.ashx'); }); </script>