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'));

HtmlEditor控件的HTML表自动完成下

1 个答案: