我有一个Html表(而不是使用HTML表的Grid控件),它具有多行,一个下拉菜单和一个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
});
});
答案 0 :(得分:0)
您在说
具有多行,其中一个下拉菜单和一个文本框控件。我想要该文本框的自动完成功能
我也看到了
$('#Item_Item_Name').autocomplete(...
您是否为每个文本框都指定了相同的ID?如果是这样,那将行不通。 ID必须是唯一的。 jQuery将假定您只有1个,并且仅针对该1个文本框触发/监听事件。
考虑改用文本框的类重写JS。