jQuery Autocomplete动态克隆表单选中值后仅填充同行输入框实现方法

问题原因 #

你当前的赋值代码存在两处核心逻辑错误：

• 执行顺序完全颠倒：$(this).closest($(".item-id").val(number)) 中，$(".item-id").val(number) 会先执行，直接给页面上所有类名为item-id的输入框赋值，之后才会执行closest查找，自然会修改所有行的内容。
• closest() 方法的使用错误：closest() 是用于向上遍历查找父级元素的方法，参数需要传入CSS选择器字符串，不能传入已经执行了赋值操作的jQuery对象。

修复方案 #

利用当前触发选中事件的输入框（即onSelect回调内的$(this)），先向上定位到当前行的容器，再在该容器的范围内查找item-id元素赋值，即可实现仅修改当前行内容的需求：

$('.item-name').autocomplete({
  lookup: sourceData,
  onSelect: function (suggestion) {
    var number = Math.floor(Math.random()*100);
    // 若你的行容器是表格tr，使用如下代码
    $(this).closest('tr').find('.item-id').val(number);
    // 若你的行容器是自定义类（如.row），替换为对应选择器即可
    // $(this).closest('.row').find('.item-id').val(number);
  }
});

该方案仅通过类选择器和层级查找实现定位，无需为动态生成的输入框设置唯一ID，完全适配clone()生成行的场景。

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