c# - asp.net Gridview 中多个文本框的 jquery 自动完成

Question

我有 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 填充每个文本框。为此我创建了一个网络服务并从 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专栏 2)。它只给我选择“引擎工作”选项..这意味着在选择任何值(由 jQuery autocomplete 填充)后我无法在其他文本框中选择任何其他值....示例:-(见下图)

如您所见，我输入了 Genral Work，但它仍然填充了我不想要的 jquery AutoComplete 中的先前值“Engine Work”

如何使用 jQuery 通过 CSS 类查找文本框？？？？

类似这样的东西(它只能通过在 GridView 中使用 jQuery 找到 TextBox id，但我需要通过 Css 类找到文本框)

var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');

Answer 1

将您的脚本 block 更改为:

$(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() + "'}",

这将始终返回数组的第一个值(第一个文本框)，因此它始终将第一个值作为搜索文本提交给您的网络服务。