Selectize.js: Loading Remote data , callback gets not called?

[daslicht]

Hello,
I am trying to modify the github repo example to be able to use it with my own service.

My service returns a data structure like this
(this is NOT the service i use, its just a dummy to reveal the data structure):
http://marcwensauer.de/public/dummy.json

Thats how the example result looks like:
https://api.github.com/legacy/repos/search/test

But when I call I can log the array but the callback gets never called:
http://i.imgur.com/Drf6VNh.png
I get no errors tho !

Result is that:

render: {
       option: function(item, escape) {

is never invoked, and therefore nothing is rendered.

Is something wrong with my data structure ?

Any idea why ? please

[nepsdotin]

Even I have the same problem, Guys Pls look into it.

[brianreavis]

You need to post your code if you want help.

[Tamjeed71]

Hi,
I am trying to use Remote Source having my own api built, Here is the code.

Here i am calling JSON data as api,

'http://apiurlgoeshere/getresponse/',

this API contains the json data.

Problem -
this API is successfully loading in console but whenever i am trying to get data in select box, but unfortunately its not displaying.
Pls help, Thanks a lot.

My code is here.

   JS Code
   ------------
            $('#select-app').selectize({
                valueField: 'title',
                labelField: 'title',
                searchField: 'title',
                options: [],
                create: false,
                render: {
                    option: function(item, escape) {
                        var apps = [];
                        for (var i = 0, n = item.app_list.length; i < n; i++) {
                            apps.push('<span>' + escape(item.app_list[i].application_name) + '</span>');
                        }

                        return '<div>' +
                              '<span class="name">' +   item.description + '</span>' 
                },
                load: function(term, callback) {
                    if (!term.length) return callback();
                    $.ajax({
                        url: 'http://apiurlgoeshere/getresponse/',
                        type: 'GET',
                        dataType: 'jsonp',
                        data: {
                            term: 'xyz',
                            page_limit: 10,

                        },
                        error: function() {
                            callback();
                        },
                        success: function(res) {
                            console.log(res.app_list);
                            callback(res.app_list);
                        }
                    });
                }

            });

[nepsdotin]

here in the above code, callback is not getting called.

[brianreavis]

Did the paste go awry? This isn't valid javascript, and you're missing a </div>.

[brianreavis]

What does the data look like coming from your server? Are you sure valueField is set properly?

[Decave]

I thought I was having this problem too, but as @brianreavis said, the issue was that I was not properly setting my valueField property.