javascript объект / массив значений во входные данные формы по клику

Question

Я выполняю функцию автозаполнения, которая заполняет список данных параметрами, включающими запрос конечной точки, который работает правильно. Но у меня есть проблема в конце моего вызова 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>

Answer 1

Проблема в том, что для каждого возвращаемого результата поиска вы добавляете еще одну функцию-обработчик события «input» к элементу «productInput». Поэтому, если есть 5 результатов, вы создаете еще 5 обработчиков событий. Затем, когда что-то вводится в это поле, все 5 обработчиков (плюс исходный, то есть 6) будут выполняться последовательно. Поскольку каждый раз он перезаписывает одни и те же текстовые поля, следовательно, вы всегда видите только последнее значение. Я уверен, что это даже не близко к тому, что вы хотели.

Вы добавляете опции в список выбора «бавленные продукты », и когда пользователь выбирает опцию, которую вы хотите, чтобы некоторые данные помещали в форму, это правильно? Если это так, было бы более разумно обработать событие «change» списка выбора (и обработать его один раз за пределами вашей функции «success» !!) и установить атрибуты данных для опции для дополнительных значений. После запуска события изменения извлеките атрибуты данных из выбранной в данный момент опции и используйте их для заполнения формы.

Вот общая идея:

В цикле по вашим результатам:

for(let i = 0; i < searchResult.length; i++) {
    //this puts matches into the select list option
    $("#returnedProducts").append("<option value='" + searchResult[i]._source.category + "' data-grpName='" + searchResult[i]._source.frm.grp.grp_name + "' data-grpNum='" + searchResult[i]._source.frm.grp.grp_code + "'>" + searchResult[i]._source.category + "</option>");
}

Затем отдельно (за пределами вашего $('#productInput').on('input', function(){ блока):

$("#returnedProducts").change(function() {
  var selectedOption = $(this).find("option:selected");
  $("#grpName").val(selectedOption.data("grpName"));
  $("#grpNum").val(selectedOption.data("grpNum"));
});