Javascript 多个输入元素的jQuery UI是否具有相同的自动完成功能？

页面中有许多

输入

字段以网格形式排列。第一列是一个文本字段，我想在其中使用jQueryUI的autocomplete函数查找位置名。它在单个元素上工作良好；使用getElementsByName（或标记或类）返回正确的元素数。但是，自动完成不起作用。我已阅读，但不明白如何将其应用于我的代码

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>

但这似乎不起作用（元素数组）：

---

再次注意，等位基因确实包含预期的条目数。浏览器调试器中没有运行时错误，执行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
    });
});

---

很少有办法做到这一点。我建议使用

.each（）

如下：

$(function(){
  var allElements = $("[name='LocationStr']");
  allElements.each(function(ind, elem){
    $(elem).autocomplete({
      source: function (request, response) {
        $.ajax({
          url: "/Wtt/AutoCompleteLocation",
          dataType: "json",
          data: {
            term: request.term,
            locationSetId: $(elem).val()
          },
          success: function (data) {
            response(data);
          }
        });
      },
      min_length: 3,
      delay: 300
    });
  });
});

.each（）

根据所选jQuery对象传递索引和HTML元素

我个人会使用

类

选择器。这样就不会出现

名称

问题

---

希望有帮助。

Aha。非常感谢。我的知识提高了！谢谢，也行，但另一张海报是第一张。非常感谢！

 $('[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
    });
});

$(function(){
  var allElements = $("[name='LocationStr']");
  allElements.each(function(ind, elem){
    $(elem).autocomplete({
      source: function (request, response) {
        $.ajax({
          url: "/Wtt/AutoCompleteLocation",
          dataType: "json",
          data: {
            term: request.term,
            locationSetId: $(elem).val()
          },
          success: function (data) {
            response(data);
          }
        });
      },
      min_length: 3,
      delay: 300
    });
  });
});