Question

Page有一些网格中列出的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（）循环执行了预期的次数。

Answer 1

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
    });
});

Answer 2

很少有办法做到这一点。我建议像.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元素。

我个人会使用class选择器。这样就没有name个问题。

希望有所帮助。

jQuery UI与几个输入元素相同的自动完成？

2 个答案: