页面有许多 input
字段,它们以网格形式排列。第一列是一个文本字段,我想在其中使用 jQueryUI 的自动完成功能查找位置名称。它在单个元素上运行良好;使用 getElementsByName(或标记或类)返回正确数量的元素。但是,自动完成不起作用。我读过How to link jQuery UI autocomplete to several input elements?但不明白如何将它应用到我的代码中。
CSHTML:
@for (int i = 0; i < Model.Count; i++)
{
<tr>
<td><input type="text" name="LocationStr" value="@Model[i].LocationStr" class="form-control" /></td>
[etc]
<script type="text/javascript">
$(document).ready(
function () {
var allElements = document.getElementsByName("LocationStr");
for (i = 0; i < allElements.length; i++) {
allElements[i].autocomplete({
source: function (request, response) {
$.ajax({
url: "/Wtt/AutoCompleteLocation",
dataType: "json",
data: {
term: request.term,
locationSetId: $("#LocationSetId").val()
},
success: function (data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
}
});
</script>
我假设是这一行是罪魁祸首。在具有单个元素的另一个页面上它工作正常:
$('#LocationStr').autocomplete({
[etc]
但这似乎不起作用(元素数组):
allElements[i].autocomplete({
[etc]
再次注意,allElements 确实包含预期数量的条目。浏览器调试器中没有运行时错误,并且 for() 循环执行了预期的次数。
最佳答案
autocomplete
是一个 jQuery 扩展,因此您不能直接在 HTML 元素中使用它。
改为这样做:
$(allElements[i]).autocomplete({
或者更好:
$('[name=LocationStr]').each(function(){
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: "/Wtt/AutoCompleteLocation",
dataType: "json",
data: {
term: request.term,
locationSetId: $("#LocationSetId").val()
},
success: function (data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
});
关于javascript - jQuery UI 对多个输入元素具有相同的自动完成功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49242831/