HTML表格下文本框控件的自动完成

Question

我有一个 Html 表（而不是我使用 HTML 表的网格控件）有多行，一个下拉菜单和一个文本框控件。我想要该文本框的自动完成功能。我实现了以下代码来自动完成但它仅针对第一行触发。这些行是动态添加的（在 jquery 中），它不适用于这些行。

<table class="table table-bordered table-hover datatable-highlight" id="tWDE_Items">
   <thead>
     <tr>                                 
        <th style="display:none">ItemId</th>                                
        <th>Item Name</th>                                  
        <th>UOM</th>
     </tr>
   </thead>
   <tbody>
      @foreach (var Item in Model.Data_Wde_ItemGrid)
      {
       <tr class="datarow">                                                                   
          <td style="display:none">@Item.Item_Id</td>
          <td>@Html.EditorFor(m => Item.Item_Name, new { htmlAttributes = new { @class = "form-control" } }) </td>
          <td>@Html.DropDownListFor(m => Item.UOM_Id, new SelectList(Item.UOMDetails, "UomId", "UomName"), htmlAttributes: new { @class = "form-control", id = "UomId" })</td> 
        </tr>
       }
      </tbody>
    </table>

我试过的Jquery代码如下。

$(function () {
$('#Item_Item_Name').autocomplete({

    source: function (request, response) {
        debugger;
        var param = { ItemName: $('#Item_Item_Name').val() };
        $.ajax({
            url: "/WDE/GetAutoCompleteItemList",
            data: JSON.stringify(param),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        val: item.split('÷')[0],
                        label: item.split('÷')[1]

                    }
                }))
            },
            error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    },
    change: function (e, i) {
        if (i.item) {

        }
        else {
            $('#Item_Item_Name').val('');
            $('#Item_Item_Id').val('');
        }
    },
    select: function (e, i) {
        debugger;
        $('#Item_Item_Name').val(i.item.label);
        $(this).closest("tr").find("td").eq(2).html(i.item.val);

    },
    minLength: 1
});
});

Answer 1

你说的是

具有多行，一个下拉菜单和一个文本框控件。我想要那个文本框的自动完成功能

我也看到了

$('#Item_Item_Name').autocomplete(...

您是否为每个文本框提供相同的 id？如果是这样，那将行不通。 ID 必须是唯一的。 Jquery 将假设您只有 1 个并且仅针对该 1 个文本框触发/侦听事件。

考虑改用文本框的类来重写你的 JS。