返回的 Ajax 结果，在 datalist 中循环返回的对象

Question

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

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

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

再次，我的 Ajax 调用成功并返回对象，但我需要做什么才能使我的 return response()->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>

更新：

+"took": 3
+"timed_out": false
+"_shards": {#1141 ▶}
+"hits": {#1309 ▼
  +"total": 231
  +"max_score": null
  +"hits": array:10 [▼
      0 => {#1191 ▼
      +"_index": "products"
      +"_type": "product"
      +"_id": "1634"
      +"_score": 5.7772136
      +"_source": {#1214 ▼
       +"category": "General 1234:0 - Dark Green 123:25"

Answer 1

在我们聊天之后，将您的 success 回调替换为：

<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>