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()或{{1 }}似乎是指同一件事，对吧？
您有3种情况：一种是.value为空的情况，一种是部分匹配（建议）的情况，另一种是完全匹配的情况。
要将代码“导出”到更高级别，您需要对#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()慢，因为前者停在第一个匹配元素上，而后者则遍历整个数组（因为它返回所有匹配元素，在这里您找到零或一个）扰流器更新后：我们不是在谈论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}" />"`
          );
        }
      });
    });
  }
});

在for循环中为对象建立索引，保留有关点击的信息

1 个答案: