javascript - HTML表格下文本框控件的自动完成
问题描述
我有一个 Html 表(而不是我使用 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>
我试过的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
});
});
解决方案
你在说
具有多行,一个下拉菜单和一个文本框控件。我想要那个文本框的自动完成功能
我也看到了
$('#Item_Item_Name').autocomplete(...
您是否为每个文本框提供相同的 id?如果是这样,那将行不通。ID 必须是唯一的。Jquery 将假设您只有 1 个并且仅针对该 1 个文本框触发/侦听事件。
考虑改用文本框的类重写您的 JS。
推荐阅读
- google-cloud-platform - 托管实例组中的抢占式虚拟机进入终止状态
- c# - C#“KeyCode”不包含“numberKey”的定义
- purescript - 将 Either 理解为 Functor
- python - 在 Python 中检查模数的更快方法
- c# - 实体未添加到另一个实体集合
- twitter-bootstrap - Bootstrap 4 开关在弹出窗口中不起作用
- java - Tomcat 从 Shared 文件夹而不是 tomcat/lib 文件夹中获取 servlet-api jar
- c++ - c++中的方阵
- swiftui - 为什么在使用文本时出现“调用初始化程序时没有匹配项”错误?
- multithreading - 在 OMP (gfortran) 中使用原子的奇怪结果