Question

我有一些Javascript，它接受用户输入，通过ajax用该输入查询端点，并从结果中返回一个字段，作为附加的<option>到datalist的一部分。这可以正常工作，并且我在选项列表中可以看到我真正需要的东西。

我接下来要研究的部分是，当我单击该选项时，我希望对象中与之相关的其他字段填充表单输入的值。我已经完成了所有这些工作，但是当我单击某个项目时，它会显示result is not defined 在这一行：

$("#groupName").val(result[$(foundOption).attr('srindex')]._source.name);

所以我的选项是正确的，并且当我单击一个选项时，它反映了控制台中被单击的选项。问题是，显然我没有将结果正确传递到我的else if中。

我的_source的继承结构是正确的，但是我只是不知道如何更改我的.val参数以获取正确的值。

有什么想法吗？

$('#productInput').on('input', function () {
  let _this = $(this);
  let foundOption;
  let optSelector = `option[value='${_this.val()}']`;
  if (_this.val() === '') {
    return;
  } else if ((foundOption = $('#returnedProducts').find(optSelector)).length) {
    console.log(optSelector); //this prints the option[value] of the clicked value as it should
    $("#groupName").val(result[$(foundOption).attr('srindex')]._source.name);
    $("#groupNum").val(result[$(foundOption).attr('srindex')]._source.code);
  } else {

    const searchResult = $(this).val(); 
    $.ajax({ url: '/account/autocomplete', 
      data: {
        search_result:searchResult
      },
      "_token": "{{ csrf_token() }}",
      type: "POST", 
      success: function (response) {
        console.log(response);

        console.log(searchResult);
        $("#returnedProducts").empty();

        let result = response.hits.hits;

        console.log(result);
        for(let i = 0; i < result.length; i++) {
          $("#returnedProducts").append("<option srindex=" + [i] + " value=" + result[i]._source.name + ">" + result[i]._source.name + "</option>");


        }
      }
    });
  }
});

更新：我的对象看起来像这样

hits
  hits
    _source
      name
      code

提琴http://jsfiddle.net/qhbt569o/8/

Answer 1

Working example 。

您只需在循环内将_source更改为source，就像这样：

for (let i = 0; i < result.length; i++) {
  $("#returnedProducts").append("<option srindex=" + [i] + " value=" + result[i].source.name + ">" + result[i].source.name + "</option>");
}

将值从Ajax中的for循环传递到表单字段

1 个答案: