CODEWITHSUNDEEP
javascriptjqueryhtmlselectize.js
user2988257
user2988257

Reputation: 961

Selectize (.js) and external source

How I can load dynamicly (like $.ajax or getjson) in selectize options list?

Searched thru the forum, looks like nobody did it this way for some reason (?) Thanks.

Upvotes: 0

Views: 747

Answers (1)

Tomanow
Tomanow

Reputation: 7377

The load(fn) method is probably what you are looking for.

Loads options by invoking the the provided function. The function should accept one argument (callback) and invoke the callback with the results once they are available.

Here is the first Remote Source example:

$('#select-repo').selectize({
    valueField: 'url',
    labelField: 'name',
    searchField: 'name',
    create: false,
    render: {
        option: function(item, escape) {
            return '<div>' +
                '<span class="title">' +
                    '<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
                    '<span class="by">' + escape(item.username) + '</span>' +
                '</span>' +
                '<span class="description">' + escape(item.description) + '</span>' +
                '<ul class="meta">' +
                    (item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
                    '<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
                    '<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
                '</ul>' +
            '</div>';
        }
    },
    score: function(search) {
        var score = this.getScoreFunction(search);
        return function(item) {
            return score(item) * (1 + Math.min(item.watchers / 100, 1));
        };
    },
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
            type: 'GET',
            error: function() {
                callback();
            },
            success: function(res) {
                callback(res.repositories.slice(0, 10));
            }
        });
    }
});

Upvotes: 1

Related Questions