Venkanna Toleti Ответов: 1

Автозаполнение для текстового поля в HTML-таблицу


У меня есть Html-таблица, имеющая несколько строк с одним раскрывающимся списком и одним элементом управления textbox.
Мне нужна функция автозаполнения для этого текстового поля.Я реализовал следующий код для автозаполнения, но он срабатывает только для первой строки.Строки добавляются динамически (в jquery), это не работает для этих строк.

Что я уже пробовал:

Code:

         <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 :

    <pre>  $('#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 Ответов

Рейтинг:
2

Member 10371658

попробовать это:

$('table#tWDE_Items tbody tr td input[type="text"]').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
    });