语义 UI - 自动完成搜索

Question

我正在尝试使用语义 UI 构建自动完成搜索，但我不知道如何显示我的数据...

<script type="text/javascript">
$(document).ready(function () {
  $('.ui.search').search({
      apiSettings: {
        url: '/autocomplete/{query}',
        minCharacters : 3,
      },
    });
});
</script>

控制器

  public function autocomplete($query)
    {
      $search = "%$query%";
      $data = Tag::where("name","LIKE",$search)->get();
      return response()->json($data);
    }

JSON 数据

"id":3,"name":"Argentina","description":"Argentina","status":"1","created_at":"2016-07-11 02:36:37","updated_at":"2016-07-11 02:36:37"},{"id":4,"name":"Argelia","description":"argelia","status":"1","created_at":"2016-07-11 02:36:48","updated_at":"2016-07-11 02:36:48"}]

Answer 1

根据他们的文档，我相信您正在寻找类似的东西（注意，我从未使用过这个库 - 也没有测试过）。查看onResponse 方法：

<script type="text/javascript">
$(document).ready(function () {
    $('.ui.search').search({
        apiSettings: {
            url: '/autocomplete/{query}',
            minCharacters : 3,
            onResponse: function(results) {    
                var response = {
                    results : []
                };    
                $.each(results, function(index, item) {              
                    response.results.push({
                        title       : item.name,
                        description : item.description
                        //url       : item.html_url
                    });
                });    
                return response;
            },
        },
    });
});
</script>