Selectize.js = how to stop it from auto loading remote data-source of suggestions?

Question

Using selectize.js plugin, https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md

it seems to triger the load() function everytime I type into the input field..

I wanted to make it load once only during initialization... been at this for an hour trying to figure it out... i've a feeling it doesn't have such functionality, or am I missing something?

Thanks guys...

Answer 1

To make selectize input load only first time you can make something like this:

$('#select').selectize({
    preload: true, // make selectize load options after initialization
    load: function(query,callback){
        this.settings.load = null; // prevent selectize from loading when typing
        // also instead of this you can 
        // override this.onSearchChange = function noop(){};
        $.ajax({...}).then(function(response){
            callback(response);
        },function(){
            callback();
        }) 
    }
});

Answer 2

I had trouble working this out. The documentation is split into Usage and API.

The load option of selectize.js is used for query/response services that will return subsets of the available data depending on the query. It makes sense that it would fire each time the query changes.

Of course, this is unnecessary if your data source does not accept query parameters. In this case, a one-time load of data should be sufficient.

According to the API, you can grab the selectize instance and call a number of methods on it, including a load.

<script>
    var $select = $('#select').selectize({
        valueField: 'value',
        labelField: 'label',
        searchField: ['label']
    });

    var selectize = $select[0].selectize;

    selectize.load(function (callback) {
        $.ajax({
            url: 'http://localhost:64596/api/things',
            type: 'GET',
            error: function (e) {
                console.error(e.responseText);
                callback();
            },
            success: function (data) {
                callback(data);
            }
        });
    });
</script>