Javascript 返回Ajax结果,在数据列表中循环返回的对象

Javascript 返回Ajax结果,在数据列表中循环返回的对象,javascript,php,ajax,laravel,Javascript,Php,Ajax,Laravel,我目前正在刀片服务器中使用输入和ajax调用,以便将输入字段的值传递给查询端点的函数。这会在每次击键时调用 当我在chrome中调试并检查network选项卡时,我可以看到它成功地从ajax调用返回了对象。问题是,我在附加到输入字段的数据列表中的对象上循环,它没有填充结果 这应该是一种自动完成类型的功能,其中ajax调用查询并返回将在数据列表中显示和过滤的结果。当我以硬编码的值将对象复制到文件中时,我在刀片中循环对象的方式起作用。我想知道我是否需要Ajax中的其他东西来正确地传递它 同样,我的A

我目前正在刀片服务器中使用输入和ajax调用,以便将输入字段的值传递给查询端点的函数。这会在每次击键时调用

当我在chrome中调试并检查network选项卡时,我可以看到它成功地从ajax调用返回了对象。问题是,我在附加到输入字段的数据列表中的对象上循环,它没有填充结果

这应该是一种自动完成类型的功能,其中ajax调用查询并返回将在数据列表中显示和过滤的结果。当我以硬编码的值将对象复制到文件中时,我在刀片中循环对象的方式起作用。我想知道我是否需要Ajax中的其他东西来正确地传递它

同样,我的Ajax调用成功并返回了对象,但是我需要做什么才能使我的返回响应->json$searchResults;返回数据列表以进行输入

controller.php

public function autoComplete(Request $request)
{
    if($request->ajax()){
       $search_result = $request->search_result;

       $service = new service();

        $searchResults = $service->getSearch($search_result);

        return response()->json($searchResults);
    }
}
view.blade.php

 <input id ="productInput"  class="uk-search-field" type="search" placeholder="search products..." list="returnedProducts">
    <datalist id="returnedProducts">
        @if ($searchResults->hits)
            @foreach($searchResults->hits as $arr)
                @foreach($arr as $obj)
                <option value="{{$obj->_source->category}}">{{$obj->_source->category}}</option>
                @endforeach
            @endforeach
        @endif
    </datalist>

<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){
                    console.log(response);
                }
            });
    }

});
</script>

聊天结束后,用以下内容替换您的成功回调:

<script>
    success: function(response){
        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>");
        }
    }

</script>

让我们看一个输出示例和要在其中显示结果的html元素。我可以很快放置一个示例,但数据列表选项是我要显示结果的地方。待命。好的,现在发布了。这看起来更像是dd的输出。我需要console.logresponse的输出。对不起,中间驱动器回家,但我一到电脑前就会尝试。谢谢好的,所以我最终使用searchResult[I]将append添加到工作中。\u source.category。再次感谢!哦好的我们错过了。让我编辑我的答案。干杯谢谢所以这似乎没有过滤结果?也就是说,如果我键入一个返回10个结果的字母和另一个只返回5个结果的字母,那么数据列表应该只显示与完整输入匹配的最新5个结果。对结果的筛选更像是一个相关搜索问题。您能否确认,在您键入时,ajax会将请求发送到PHP…对吗?
<script>
    success: function(response){
        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>");
        }
    }

</script>