【发布时间】：2018-08-29 17:47:44
【问题描述】：
我正在做一个自动完成功能，它用由端点查询组成的选项填充数据列表，它工作正常。但是在我的 ajax 调用结束时我遇到了一个问题，我的函数只影响数组的最后一个元素，而不是被点击的正确元素。我试图确保当用户单击列表中的选择时，它将对象的某些值发送到表单输入字段中以保存。
现在，当我单击一个选项时，它确实会将正确的对象值放入表单中，但是，它们是对应于数组中最后一个元素的值，而不是单击的那个。
我已经评论了我的问题从哪里开始，但这是整个脚本供参考。再次，列表正确填充（虽然有点慢）并且点击确实填写了表单输入，但值不对应于点击的选项，只是数组中的最后一个。
我在这里做错了什么？
<script type="text/javascript">
//If user types, send their input in ajax POST on each keystroke
$('#productInput').on('input', function(){
if($(this).val() === ''){
return;
}else{
//their input is searchResult
const searchResult = $(this).val();
$.ajax({ //url
data: {
search_result:searchResult
},
type: "POST",
success: function(response){
//empty out old responses
$('#returnedProducts').empty();
//this starts my index
let searchResult = response.hits.hits;
for(let i = 0; i < searchResult.length; i++) {
//this puts matches into the datalist option, which works
$("#returnedProducts").append("<option value=" + searchResult[i]._source.category + ">" + searchResult[i]._source.category + "</option>");
/*This block is my issue*/
$("#productInput").on('input', function(){
var val = this.val = this.value;
if($('#returnedProducts option').filter(function(){
return this.value === val;
}).length){
//These elements do fill, but the values correspond to only the last array item, not the clicked one
document.getElementById("grpName").value = searchResult[i]._source.frm.grp.grp_name;
document.getElementById("grpNum").value = searchResult[i]._source.frm.grp.grp_code;
}
})
/*end of problem block*/
}
}
});
}
});
</script>
【问题讨论】：
-
如果你使用它而不是混入
document.getElementById，你可能应该坚持使用jquery，以提高可读性等。并且也许避免使用潜在的模棱两可的陈述，例如var val = this.val = this.value;，您最终也可能会解决问题。 -
当然，我可能会针对这些问题进行一些重构。我只是想知道我当前的问题是否与设置 [i] 而不是将其传递到我的问题函数中
-
对于返回的每个搜索结果，您将另一个“input”事件处理函数添加到“productInput”元素。因此，如果有 5 个结果，则再创建 5 个事件处理程序。然后，当向该框中输入内容时，所有 5 个处理程序（加上原来的处理程序，因此 6 个）将同时执行。很确定这甚至与您想要的都不接近。
-
您正在向“returnedproducts”选择列表添加选项，当用户选择一个选项时，您希望将一些数据放入表单中，对吗？也许更好地处理选择列表的“更改”事件（并在“成功”函数之外处理它一次！！），并为额外值设置选项的数据属性。当更改事件运行时，从当前选择的选项中检索数据属性并使用这些属性填充您的表单。
-
有什么方法可以将其应用到示例中？
标签： javascript html json ajax dom-events