Selectize dropdown not loading from database

Question

I refered http://maxoffsky.com/code-blog/laravel-shop-tutorial-3-implementing-smart-search/ to implement search functionality in my laravel application

When i use javascript sample code for remote source from http://brianreavis.github.io/selectize.js/ it works absolutely fine.But when i use it load data from my own controller method it does not populate the items in select menu.

This is my controller method

public function index(){

$query = e(Input::get('q',''));

if(!$query && $query == '') return Response::json(array(), 400);

$products = User::where('firstname','like','%'.$query.'%')
  ->orderBy('firstname','asc')
  ->take(5)
  ->get(array('talent','firstname','profilepic','username'))->toArray();

$categories = User::where('talent','like','%'.$query.'%')
  ->take(5)
  ->get(array('talent', 'firstname','username'))
  ->toArray();


// Merge all data into one array
$data = array_merge($products, $categories);

    return Response::json(array(
    'data'=>$data
  ));
 }

I have initialized my selectize using the following code

 $(document).ready(function(){



        $('#searchbox').selectize({    
        valueField: 'name',
        labelField: 'firstname',
        searchField: 'firstname',
        options: [],
        render: {
                option: function(item, escape) {
                    return '<div>hello</div>';
                }
            },
        load: function(query, callback) {
                if (!query.length) return callback();
                $.ajax({
                    url: root + '/search',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        q: query
                    },
                    error: function() {
                        callback();
                    },
                    success: function(res) {
                        callback(res.data);
                    }
                });
            },
            onChange: function(){
                window.location = this.items[0];
            }
         create: false
           });
         });

I am not able to figure out what am i missing out

Answer 1

I would consider comparing what the data looks like when you query the example remote service that works properly, and then comparing what the data looks like when you retrieve it from your controller. I suspect this could make it easy to see what is different with the format your data is appearing, and what steps need to be done to change it. If you are still stuck you could post the resulting json from both here, and I could likely give you further guidance to make yours line up with theirs.