在 HTML 表格自动完成下为 HtmlEditor 控件

Question

我有一个 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>

Java 脚本：

 $('#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

您的 autocomplete() 调用仅适用于您调用它时 dom 中的元素。因此，对于动态添加的元素，您需要再次调用该函数（在添加新行之后）。

还有一点需要注意的是，任何使用元素 id ($('#Item_Item_Name')) 的调用都只适用于具有该 id 的第一个元素，因为 id 是唯一的。因此，您需要更改选择器以从新行获取输入。

创建一个初始化 autocomplete 的函数，然后在添加的每一行之后，在所需的元素上调用该函数。

function initAutoComplete(elem) {
    $(elem).autocomplete({ /* the same as you use now */ });
}
// after you addded the new row
initAutoComplete($(newRow).find('.autocopmlete-input'));