PHP-JQuery Autocomplete动态输入框功能异常问题求助

我懂你遇到的问题了——单个输入框时Autocomplete跑得好好的，但是动态生成新的输入框后，新框就没这个功能了对吧？这其实是因为页面初始化时绑定的Autocomplete只对当时存在的DOM元素生效，后来动态添加的元素没被绑定上事件。

给你一套实用的解决方案，分三步来：

1. 封装Autocomplete初始化函数 #

先把Autocomplete的逻辑抽成一个可复用的函数，这样不管是初始输入框还是动态生成的，都能调用它来初始化：

function initAutocomplete(inputElement) {
  // 这里以jQuery UI的Autocomplete为例，可替换为你使用的插件逻辑
  $(inputElement).autocomplete({
    source: function(request, response) {
      // 替换成你的数据源，比如AJAX请求后端接口
      $.ajax({
        url: "你的搜索接口地址",
        dataType: "json",
        data: {
          term: request.term // 输入框当前内容
        },
        success: function(data) {
          response(data); // 返回搜索结果
        }
      });
    },
    minLength: 2, // 输入至少2个字符触发搜索
    select: function(event, ui) {
      // 选中建议项后的处理，比如把选中值填入输入框
      $(this).val(ui.item.label);
      return false;
    }
  });
}

2. 初始化页面已有的输入框 #

页面加载完成后，先给初始的那个输入框挂上Autocomplete：

$(document).ready(function() {
  // 初始化第一个输入框
  initAutocomplete("#sug_input");
});

3. 动态生成输入框时初始化新元素 #

假设你是通过克隆现有输入框来生成新元素，那在克隆完成后，一定要给新的输入框调用初始化函数，同时注意修改ID和name避免重复（不然表单提交或者选择器会出问题）：

// 假设你有一个"添加输入框"的按钮，绑定点击事件
$(".add-input-btn").on("click", function() {
  // 克隆第一个输入框容器
  var newInputContainer = $(".clonedInput").first().clone();
  // 生成新的ID，避免重复
  var newContainerId = "input" + ($(".clonedInput").length + 1);
  newInputContainer.attr("id", newContainerId);
  
  // 处理新的输入框：清空值、修改ID和name
  var newInputField = newInputContainer.find("input.form-control");
  newInputField.val("")
              .attr("id", "sug_input_" + newContainerId)
              .attr("name", "title_" + newContainerId);
  
  // 把新的输入框容器添加到页面中
  $("#items").append(newInputContainer);
  
  // 关键！给新输入框初始化Autocomplete
  initAutocomplete(newInputField);
});

额外注意事项 #

• 如果你用的不是jQuery UI的Autocomplete，只需要把initAutocomplete函数里的逻辑替换成你用的插件初始化代码就行，核心思路是一样的：动态生成元素后手动初始化插件。
• 一定要避免ID重复，不管是输入框还是容器的ID，重复的ID会导致JS选择器失效，甚至影响表单提交。

内容的提问来源于stack exchange，提问作者Niko surya pratama