Question

我有一个工作的ajax脚本，该脚本调用一个端点并返回一个json对象，我成功地循环了该对象并将其值附加到数据列表选项列表中。

这可以成功工作，但是我的问题是，当我单击一个数据列表选项时，我想从该JSON对象中获取另一个值（在同一索引中），并让它填充表单输入框的值。

基本上，ajax / javascript可以运行到$("#returnedProducts option").click(function(){行，我要单击该行并将该选项的值加载到表单输入中。

我的javascript / ajax：

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

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

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

                    for(let i = 0; i < searchResult.length; i++) {

                        //The below line is putting the correct elements in my datalist. I want the following click function to happen if one of these options is clicked
                        $("#returnedProducts").append("<option value=" + searchResult[i]._source.group_cover_color + ">" + searchResult[i]._source.group_cover_color + "</option>");

                        $("#returnedProducts option").click(function(){
                            document.getElementById("groupName").value = searchResult[i]._source.frm.grp.Name;
                    });
                    }
                }
            });
    }

});
</script>

使用console.log（searchResult）返回的JSON对象：

1:
    _source:
        frm:
            grp:
                Name: "Name One"

因此，我只是在尝试处理此问题，以便如果单击该选项，名称将成为下面输入字段的值：

<form id="productForm">
    <input id="groupName" type="text">
</form>

单击时，将json值添加为输入作为输入值

0 个答案: