Elio Elio - 4 months ago 156
JSON Question

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

Answer

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