CODEWITHSUNDEEP
jsonajaxlaravelautocomplete
Eliott
Eliott

Reputation: 262

Semantic UI - Autocomplete Search

Im trying to build an autocomplete search with Semantic UI but i dont know how to show my data...

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

CONTROLLER 

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

JSON DATA

"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"}]

Upvotes: 0

Views: 1612

Answers (1)

Mike Barwick
Mike Barwick

Reputation: 5367

Based on their documentation, I believe you're looking for something like this (note, I've never used this library - and didn't test). Check out the onResponse method:

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

Upvotes: 1

Related Questions