Question

我已经在视图中正确实现了一个输入上的自动完成功能现在我想允许用户添加更多输入（在js中添加按钮）问题是新添加的输入是不是调用自动完成功能为什么？

自动完成功能

$(document).ready(function () {
            $(".AOI").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Test/SearchAOI",
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.AOIName, value: item.AOIName };
                            }))

                        }
                    })
                },
                messages: {
                    noResults: '',
                    results: function (resultsCount) { }
                }
            });
        })

可让用户添加更多输入的功能

var areaIndex = "b";
        $("#addAOI").click(function () {
            //create the elements representing the new object, giving them a fake indexer
            areaIndex = areaIndex + "b";
            $("#AOIFields").append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
        })

视图的一部分

         <input type="hidden" name="AOI.Index" value="123"style="display:none"/>

                        <input type="text" class="form-control AOI" name="AOI[123]" />
                    </td>
                </tr>

Answer 1

您需要将自动完成绑定到新的添加元素，因此您可以执行

$("#addAOI").click(function () {
    //create the elements representing the new object, giving them a fake indexer
    areaIndex = areaIndex + "b";
    var $container = $("#AOIFields");
    $container.append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
    $container.find(".AOI").last().autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Test/SearchAOI",
                type: "POST",
                dataType: "json",
                data: { Prefix: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.AOIName, value: item.AOIName };
                    }))

                }
            })
        },
        messages: {
            noResults: '',
            results: function (resultsCount) { }
        }
    });
})

为了获得更好的结果，您可以在var

中存储自动完成选项

Answer 2

您需要在新添加的元素上实例化autocomplete()逻辑。您当前只在加载时将其应用于DOM中的元素。

最简单的方法是将自动完成逻辑提取到您自己的函数中，您可以根据需要调用它，如下所示：

＆＃13;

function defineAutoComplete($parent) {
  $parent.find(".AOI").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/Test/SearchAOI",
        type: "POST",
        dataType: "json",
        data: {
          Prefix: request.term
        },
        success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.AOIName,
              value: item.AOIName
            };
          }));
        }
      })
    },
    messages: {
      noResults: '',
      results: function(resultsCount) {}
    }
  });
}

// on load:
defineAutoComplete($(document));

// on click:
$("#addAOI").click(function() {
  areaIndex = areaIndex + "b";
  var $html = $("<td><input type='hidden' name='AOI.Index' value='" + areaIndex + "' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI[" + areaIndex + "]' /></td>").appendTo('#AOIFields');
  defineAutoComplete($html)
})

＆＃13;

为什么新添加的输入不调用自动完成功能？

2 个答案: