for循环中的索引对象，单击时保留信息

Question

我有 javascript，包括一个 ajax 调用，它采用空表单输入并使用用户键入的内容来查询 json 对象。它成功返回匹配的对象并将它们显示在数据列表中。

这一切都很好，但现在我试图确保当他们点击一个列表选项时，我只从那个选定的选项中获取某些字段，以便我最终可以将它们发布到一个表单中。

当单击一个选项时，我在控制台 (console.log(searchResult[i]._source.frm.grp.Name)) 中获得了我想要的值，但它为我提供了以前对象中的每一个，我只想要来自单击的对象的数据。

我认为这可能与我在 for 循环中执行该函数的事实有关，或者它与我使用 [i] 的索引有关，但我无法确定它。

我怎样才能让它只影响被点击的索引对象的值？

<script type="text/javascript">
//input event handler
$('#productInput').on('input', function(){
    if($(this).val() === ''){
       return;
    }else{

       const searchResult = $(this).val(); 

       $.ajax({ url: '/account/autocomplete', 
                data: {
                    search_result:searchResult
                },
                "_token": "{{ csrf_token() }}",
                type: "POST", 
                success: function(response){
                    $('#returnedProducts').empty();
                    let searchResult = response.hits.hits;

                    for(let i = 0; i < searchResult.length; i++) {
                        $("#returnedProducts").append("<option value=" + searchResult[i]._source.category + ">" + searchResult[i]._source.category + "</option>");

                        //Issue starts here//
                        $("#productInput").on('input', function(){
                            var val = this.val = this.value;
                            if($('#returnedProducts option').filter(function(){
                                return this.value === val;
                            }).length){
                                document.getElementById("grpName").value = searchResult[i]._source.frm.grp.grp_name;
                                document.getElementById("grpNum").value = searchResult[i]._source.frm.grp.grp_code; 
                            }
                        })   
                    }
                }
            });
    }

});
</script>

<form>
<input id="grpName">
<input id="grpNum">
</form>

Answer 1

对此我不确定，但这是我的理解：

• 你这里的所有代码都已经包装在'input'事件的监听器中，应该不需要添加另一个监听器，尤其是在同一个属性上工作（.val()或.value似乎是指同样的事情，对吧？）
• 您有 3 种情况：一种是 #productInput 为空，一种是部分匹配（建议），另一种是完美匹配
• 要将此代码“导出”到更高级别，您将需要更高的访问权限来访问您当前拥有的 searchResult（不是 const 一个，let 一个）
• 出于同样的目的，您将有一种将<option> 与searchResult 中的元素链接的方法（例如添加任意参数srindex，其中包含searchResult 中元素的索引）

最终，您的顶部 if 块应如下所示：

let _this = $(this);
let foundOption;
if (_this.val() === '') {
  return;
} else if (foundOption = $('#returnedProducts option').find((option) => {
  return option.srindex === _this.val();
})) {
  console.log(searchResult[foundOption.srindex].blahblah);
} else {
  $.ajax(...);
}

备注：

• 使用.find() 通常更快并且不能比.filter() 慢，因为前者在第一个匹配元素上停止，而后者无论如何都会遍历整个数组（因为它返回all 匹配的元素，在这里你有 0 或 1 可以找到）剧透更新后：我们不是在谈论 Array.prototype.find，我们是关于 jQuery.find，但是嘘，我还不知道！
• 我不确定option.srindex 按原样工作，也许它类似于option.getAttribute('srindex') 剧透更新后：它不能按原样工作

更新（长时间聊天和多次尝试后的解决方案）

$('#productInput').on('input', function () {
  let _this = $(this);
  let foundOption;
  let searchResult = [];
  let optSelector = `option[value='${_this.val()}']`;
  if (_this.val() === '') {
    return;
  } else if ((foundOption = $('#returnedProducts').find(optSelector)).length) {
    $("#grpName").val(searchResult[$(foundOption).attr('srindex')]._source.frm.grp.grp_name);
    $("#grpNum").val(searchResult[$(foundOption).attr('srindex')]._source.frm.grp.grp_code);
  } else {
    $.ajax({ url: '/account/autocomplete', 
      data: {
        search_result: _this.val()
      },
      "_token": "{{ csrf_token() }}",
      type: "POST", 
      success: function (response) {
        $("#returnedProducts").empty();
        for(let i = 0; i < response.hits.hits.length; i++) {
          $("#returnedProducts").append(
            `<option srindex="${i}" value="${searchResult[i].cat}" />"`
          );
        }
      });
    });
  }
});