jquery自动完成asp.net Gridview中的多个文本框
Posted
技术标签:
【中文标题】jquery自动完成asp.net Gridview中的多个文本框【英文标题】：jquery autocomplete for multiple textboxes inside asp.net Gridview 【发布时间】：2014-07-26 12:34:54 【问题描述】：我有 asp.net Gridview，默认情况下至少有 15 行带有文本框的示例
aspx
<asp:GridView ID="gv_Others" runat="server" AutoGenerateColumns="false" CssClass="gvothers">
<Columns>
<asp:TemplateField >
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemTemplate >
<asp:TextBox ID="txtEmp" runat="server" Width=100% Height=22px CssClass="txtE"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
aspx.cs（这里我如何生成 15 行 GridView）
private void SetInitialRowsofOthers()
var list = new List<string>();
for (int i = 0; i < 16; i++)
list.Add(string.Empty);
gv_Others.DataSource = list;
gv_Others.DataBind();
gv_Others.HeaderRow.Visible = false;
WevService.axms
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetotherServices(string txt1)
// your code to query the database goes here
List<string> result = new List<string>();
string QueryString = System.Configuration.ConfigurationManager.ConnectionStrings["autoDBConn"].ToString();
using (SqlConnection obj_SqlConnection = new SqlConnection(QueryString))
using (SqlCommand obj_Sqlcommand = new SqlCommand("Select DISTINCT OtherService as txt1 from easy_tblOtherServiceMaster where OtherService like @SearchText + '%' ", obj_SqlConnection))
obj_SqlConnection.Open();
obj_Sqlcommand.Parameters.AddWithValue("@SearchText", txt1);
SqlDataReader obj_result1 = obj_Sqlcommand.ExecuteReader();
while (obj_result1.Read())
result.Add(obj_result1["txt1"].ToString().TrimEnd());
return result;
我想用 jQuery autocomplete 填充每个文本框。为此我创建了一个 web 服务并从 jQuery 获取值。
我是如何尝试完成这项任务的：
<script src="js/jquery-1.8.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
SearchText();
function SearchText()
var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');
$($arrT).autocomplete(
source: function(request, response)
$.ajax(
url: "WebService.asmx/GetotherServices",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: " 'txt1' : '" + $($arrT).val() + "'",
dataFilter: function(data) return data; ,
success: function(data)
response($.map(data.d, function(item)
return
label: item,
value: item
))
//debugger;
,
error: function(result)
alert("Error");
);
,
minLength: 1,
delay: 1000
);
);
</script>
<script type="text/javascript">
$(document).ready(function()
SearchText();
function SearchText()
$("#<%=Txt_RegNo.ClientID %>").autocomplete(
source: function(request, response)
$.ajax(
url: "WebService.asmx/GetAutoCompleteData",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: " 'txt' : '" + $("#<%=Txt_RegNo.ClientID %>").val() + "'",
dataFilter: function(data) return data; ,
success: function(data)
response($.map(data.d, function(item)
return
label: item,
value: item
))
//debugger;
,
error: function(result)
alert("Error");
);
,
minLength: 1,
delay: 1000
);
);
</script>
<script type="text/javascript">
$(function()
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function(e)
//var key = (e.keyCode ? e.keyCode : e.charCode);
var key = e.which;
if (key == 13)
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
);
);
</script>
<script type="text/javascript">
function Load_OtherService()
var hv = $('input[id$=hdnOthers]');
var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');
var hv1 = "" + hv.val();
var va = hv1.split(',');
for (var j = 0; j < va.length; j++)
var $txt = $arrT[j];
$($txt).val(va[j]);
</script>
现在，例如，当我在 TEXTBOX 1 中键入“Engine Work”并选择由 jQuery autocomplete("Engine Work") 填充的值，然后第二次在其他文本框（TEXT BOX 2）中键入时。它只给我“引擎工作”选项来选择..这意味着在选择任何值（由 jQuery autocomplete 填充）后，我无法在其他文本框中选择任何其他值......
示例：-（见下图）
如您所见，我输入了一般工作，但它仍然在 jquery AutoComplete 中填充了我不想要的先前值“引擎工作”
如何使用jQuery通过CSS类找到TextBox????
类似这样的（它只能通过在GridView 中使用 jQuery 找到 TextBox id，但我需要通过 Css 类找到文本框）
var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');
【问题讨论】：
感谢您更新问题。有时我的眼睛会读到“什么是 1 + 1？”我的大脑将其解释为“内布拉斯加州的首府是什么？”... 【参考方案1】：将您的脚本块更改为：
$(document).ready(function()
// This selects all inputs inside the table with the txtE class and applies
// the autocomplete function to them
$('table[id$="gv_Others"] input.txtE').autocomplete(
source: function(request, response)
$.ajax(
url: "WebService.asmx/GetAutoCompleteData",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: " 'txt1' : '" + request.term + "'",
dataFilter: function(data) return data; ,
success: function(data)
response($.map(data.d, function(item)
return
label: item,
value: item
))
//debugger;
,
error: function(result)
alert("Error");
);
,
minLength: 1,
delay: 1000
);
);
查看 ajax 帖子中的 data: - 它使用的是 request.term，我更改了选择器。
你的 jquery 的问题是这一行：
data: " 'txt1' : '" + $($arrT).val() + "'",
这将始终返回数组的第一个值（第一个文本框），因此它始终将第一个值作为搜索文本提交给您的网络服务。
【讨论】：
嗨@Zach 我已经尝试过了，在你回答之前......它还会在其他文本框中填充先前选择的值 好的，那么你想使用过滤表达式并过滤 where val() == '' @zech 如果可以使用过滤器表达式，那为什么不呢 第一个文本框的值总是提交给你的网络服务。这是因为您将 $($arrT).val() 传递给 $.ajax POST。 @zech 感谢您给了我宝贵的时间，它解决了我的问题【参考方案2】：using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Collections.Generic;
using System.Web.Script.Serialization;
namespace PlatForm_RollUp
/// <summary>
/// Summary description for SearchDPN
/// </summary>
public class SearchDPN : IHttpHandler
public void ProcessRequest(HttpContext context)
string prefixText = context.Request.QueryString["term"];
if (string.IsNullOrEmpty(prefixText)) prefixText = "NA";
using (SqlConnection conn = new SqlConnection())
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["PPN_ConnectionString"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
cmd.CommandText = "select DPN_Key, DPN, Item_Desc from Customer.DIM.PPN WHERE " +
"DPN like @SearchText+'%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
//StringBuilder sb = new StringBuilder();
List<string> _dpn = new List<string>();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
while (sdr.Read())
//sb.Append(string.Format("0 - 1", sdr["DPN"], sdr["Item_Desc"], Environment.NewLine));
_dpn.Add(sdr["DPN"].ToString() +" - " +sdr["Item_Desc"].ToString());
conn.Close();
context.Response.Write(new JavaScriptSerializer().Serialize(_dpn));
public bool IsReusable
get
return false;
***************************
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function ()
initializer();
);
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function ()
//you need to re-bind your jquery events here
initializer();
);
function initializer()
$("[id*=txtDPN]").autocomplete( source:
"/Handlers/SearchDPN.ashx" );
</script>
【讨论】：
我使用 Asp.Net 通用处理程序执行 SQL，输入的文本作为参数传递给 SQL 命令。它返回响应以自动完成输入文本的文本框。以上是关于jquery自动完成asp.net Gridview中的多个文本框的主要内容，如果未能解决你的问题，请参考以下文章
使用 Jquery 自动完成时的 IE11 内存泄漏 (asp.net)