под таблицей HTML Автозаполнение для HtmlEditor Control - PullRequest
Новая
       6

под таблицей HTML Автозаполнение для HtmlEditor Control

0 голосов
/ 26 августа 2018

У меня есть Html-таблица, содержащая несколько строк с одним раскрывающимся списком и одним элементом управления textbox. Я хочу функцию автозаполнения для этого текстового поля. Я реализовал следующий код для автозаполнения, но он запускает только первую строку. Строки добавляются динамически (в 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 Script: 

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

1 Ответ

0 голосов
/ 26 августа 2018

Ваш autocomplete() вызов работает только с теми элементами, которые находятся в домене в тот момент, когда вы вызываете его. Поэтому для динамически добавляемых элементов вам потребуется снова вызвать функцию (после добавления новой строки).

Еще одна вещь, на которую следует обратить внимание, это то, что любой вызов, использующий идентификатор элемента ($('#Item_Item_Name')), будет работать только для первого элемента с этим идентификатором, поскольку идентификаторы должны быть уникальными. Поэтому вам нужно изменить селектор, чтобы получить ввод из новой строки.

Создайте функцию, которая вставляет autocomplete И после каждой добавляемой строки вызывайте эту функцию для нужного элемента. 

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