jQuery Autocomplete适配输入数组问题求助

嘿，我懂你遇到的麻烦了——这种同名输入框用自动补全时，选完内容所有框都跟着变的问题太常见了！核心原因就是你的脚本在更新值的时候，没分清是哪个输入框触发的选择操作，反而把所有同名的输入框都给改了。给你几个具体的解决方向，应该能搞定：

• 绑定事件时锁定当前交互的输入框
  不管你用的是第三方库（比如jQuery UI Autocomplete）还是自己写的原生脚本，在处理选择回调的时候，一定要用当前触发事件的元素作为操作对象，而不是全局选中所有同名输入框。
  举个jQuery UI的例子：

  $('input[name="your-input-name"]').autocomplete({
    source: yourSourceData, // 你的自动补全数据源
    select: function(event, ui) {
      // 用$(this)指代当前触发选择的那个输入框，而非所有同名框
      $(this).val(ui.item.label);
      // 如果要更新对应的隐藏输入框，也只找当前输入框的关联项
      $(this).closest('.input-group').find('input[type="hidden"]').val(ui.item.value);
      return false;
    }
  });
  

  如果是原生JS实现，就在事件处理函数里通过event.target获取当前输入框，再基于它做后续操作。

• 给输入组添加唯一标识关联元素
  如果你的输入框和隐藏域是成对出现的（比如每行一个输入框+隐藏域），可以给它们加相同的自定义属性（比如data-row-id）来做关联，这样更新时就能精准定位到对应元素：
  示例HTML结构：

  <div class="input-row">
    <input type="text" name="product" data-row-id="1">
    <input type="hidden" name="product_id" data-row-id="1">
  </div>
  <div class="input-row">
    <input type="text" name="product" data-row-id="2">
    <input type="hidden" name="product_id" data-row-id="2">
  </div>
  

  对应的选择回调逻辑：

  function handleAutocompleteSelect(event, selectedItem) {
    const currentInput = event.target;
    const rowId = currentInput.dataset.rowId;
    // 更新当前输入框的值
    currentInput.value = selectedItem.label;
    // 精准找到对应rowId的隐藏域更新
    document.querySelector(`input[name="product_id"][data-row-id="${rowId}"]`).value = selectedItem.id;
  }
  

• 用相对选择器替代全局选择器
  别在回调里用document.querySelectorAll('input[name="xxx"]')这种全局查找的方式，而是从当前输入框出发，用DOM的相对查找方法（比如closest()、siblings()、nextElementSibling）定位到只属于当前组的元素。比如如果隐藏域是输入框的下一个兄弟节点，直接用currentInput.nextElementSibling就能找到它，不会影响其他行的元素。

总的来说，你只需要把脚本里“批量更新所有同名元素”的逻辑，改成“只更新触发交互的那个元素及其关联项”，问题就能解决啦！

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