已实现单输入框autocomplete，新增输入框无法触发该函数的原因排查

这个问题我之前也碰到过！核心原因其实很直白：

你在$(document).ready()里调用.autocomplete()的时候，只会给页面加载完成时已经存在于DOM中的.AOI输入框绑定自动补全功能。而通过JS按钮新增的输入框，是在页面初始化之后才被创建出来的，它们并没有被包含在第一次的选择器匹配结果里，自然也就没被绑定autocomplete行为。

解决方法有两种，看你偏好哪种： #

方法一：新增输入框后立即初始化它的Autocomplete #

每次创建新输入框的时候，直接给这个新元素调用autocomplete初始化逻辑。比如你的添加按钮事件可以这么写：

// 假设这是你的添加按钮点击事件
$("#add-input-btn").click(function() {
  // 创建新的输入框DOM元素
  const newAOIInput = $('<input type="text" class="AOI" placeholder="输入AOI关键词...">');
  // 把新输入框添加到页面的容器里（比如某个div）
  $("#aoi-input-container").append(newAOIInput);
  
  // 关键步骤：给刚创建的输入框绑定Autocomplete
  newAOIInput.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) {
            // 这里补全你原来的映射逻辑，比如返回label和value
            return {
              label: item.Name, // 替换成你实际的字段名
              value: item.Id    // 替换成你实际的字段名
            };
          }));
        }
      });
    }
  });
});

方法二：封装初始化函数，复用逻辑 #

如果Autocomplete的配置比较复杂，重复写代码太麻烦，建议把初始化逻辑封装成一个独立函数，页面加载和新增元素时都调用它：

// 封装Autocomplete初始化函数
function setupAOIAutocomplete(targetElement) {
  $(targetElement).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.Name,
              value: item.Id
            };
          }));
        }
      });
    }
  });
}

// 页面加载完成后，初始化已有的.AOI输入框
$(document).ready(function () {
  setupAOIAutocomplete(".AOI");
});

// 添加按钮点击事件
$("#add-input-btn").click(function() {
  const newAOIInput = $('<input type="text" class="AOI" placeholder="输入AOI关键词...">');
  $("#aoi-input-container").append(newAOIInput);
  // 调用封装好的函数初始化新输入框
  setupAOIAutocomplete(newAOIInput);
});

这样不管是页面原本的输入框，还是后来动态添加的，都能正常触发Autocomplete啦！

内容的提问来源于stack exchange，提问作者programmer