У меня есть Html-таблица (вместо элемента управления Grid я использовал таблицу 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>
И код 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
});
});