Javascript 在表单中添加行自动完成函数将中断

在一个表单中，我有两个输入。在第一个输入中，我使用一个

datalist

，我通过

JSON

加载它，第二个输入是在第一个输入更改时自动完成它。 直到这里一切都好

然后我添加了一个添加按钮，在那里我添加了相同的行。问题是，因为我使用

id

来选择输入，所以当我添加新行时，我有相同的id。。所以自动完成不起作用

我怎样才能解决这个问题？给你

计数器=0；
var dataList=document.getElementById（'products'）；
var jsonOptions=[{
“产品”：“11111”，
“说明”：“说明1”
}, {
“产品”：“22222”，
“说明”：“说明2”
}, {
“产品”：“33333”，
“说明”：“说明3”
}];
jsonOptions.forEach（函数（项）{
var option=document.createElement（'option'）；
option.value=item.product；
option.text=item.description；
dataList.appendChild（可选）；
$（函数（）{
$（'#product'）。在（'change keyup'，function（）上{
var i=该值；
var description=“”；
var productsInBox=0；
forEach（函数（a）{
如果（a.product==i）{
描述=a.描述；
productsInBox=a.productsInBox；
}
});
$（'描述'）.val（描述）；
});
});
});
$（“#表格1”）
//添加按钮单击处理程序
.on（'click'，'addbuttoned'，函数（）{
计数器++；
var$template=$（“#addLineInDed”），
$clone=$template
.clone（）
.removeClass（'hide'））
.removeAttr（'id'））
.attr（'数据索引'，计数器）
.insertBefore（$template）；
//更新名称属性
$clone
.find（'[name=“product”]'）.attr（'name'，'product-'+counter）.end（）
.find（'[name=“description”]'）.attr（'name'，'description-'+计数器）。end（）
})
//删除按钮单击处理程序
.on（'click'，'removeButtoned'，函数（）{
var$row=$（this）.parents（'.form group'），
index=$row.attr（'data-index'）；
计数器--；
//删除包含字段的元素
$row.remove（）；
});

提交
正如您所说，您已经尝试使用类

封装您的代码，这样您就可以拥有如下功能：
函数FilldatalistOptions（元素，选项）

然后，您可以拥有两个具有不同id的数据列表（可能是products1和products2）。
只需像这样调用函数：

var dataList1 = document.getElementById('products1');
var dataList2 = document.getElementById('products2');
FilldatalistOptions(datalist1, jsonOptions);
FilldatalistOptions(datalist2, jsonOptions);

使用类，将SELEC重命名为数组值：


计数器=0；
var dataList=$（'.products'）；
var jsonOptions=[{
“产品”：“11111”，
“说明”：“说明1”
}, {
“产品”：“22222”，
“说明”：“说明2”
}, {
“产品”：“33333”，
“说明”：“说明3”
}];
jsonOptions.forEach（函数（项）{
var选项=''+项目描述+''；
dataList.append（可选）；
});
$（函数（）{
$（'body'）。在（'input'，'product'，'products'，function（）上{
var i=该值；
var description=“”；
var productsInBox=0；
forEach（函数（a）{
如果（a.product==i）{
描述=a.描述；
productsInBox=a.productsInBox；
}
});
$（this）.closest（'.form group'）.find（'.description'）.val（description）；
});
});
$（'#form1'）。在（'click'，'addbuttoned'，函数（）上{
var$template=$（'.form group:last'）.clone（true，true）.find（'input'）.val（''）.end（）
.find（'.addButtoned'）.removeClass（'AddButtoned'）.addClass（'RemoveButtoned'）.end（）
.find（'i'）.removeClass（'fa-plus'）.addClass（'fa-plus'）.end（）；
$template.insertAfter（'.formgroup:last'）；
})
//删除按钮单击处理程序
.on（'click'，'removeButtoned'，函数（）{
var$row=$（this）.closest（'.formgroup'）；
$row.remove（）；
});

提交
如果id有问题，请使用类：））我试图用类替换id，但当我更改第一个输入时，所有内容都会更改。请参阅下面的答案。如果我知道行的总数，您的解决方案将有效。在我看来，我不知道用户会按“添加”按钮多少次。@yaylitzis我明白了。如果可以控制“AddLine”方法，还可以让它更新一个全局变量（比如lineCount++），并使用
id='products'+lineCount
生成新的数据列表。这样，您将拥有单个动态生成的id。您还将知道总共有多少个数据列表。1.在新行中，每个输入都有一个属性
name=“product[]”
。所以我无法从服务器端读取值。。2.如果您看到这里，新行将添加到submit按钮下。@yaylitzis 1。您可以使用循环2读取值。请看，我没有在您的问题中看到“无删除”按钮，如果您需要，可以添加oneLet。