Selectize.js: How to prefetch all options from REST API without needing to type anything in the box

[kevinisaac]

This is the code I have:

    // Selectize stuff
    function selectize_fields(field, endpoint, json_namespace) {
        var dropdown = $(field).selectize({
            valueField: 'uid',
            labelField: 'name',
            searchField: ['uid', 'name'],
            options: [],
            create: false,
            render: {
                option: function(item, escape) {
                    return '<div>' + item.name + '</div>';
                }
            },
            load: function(query, callback) {
                if (!query.length) return callback();
                $.ajax({
                    url: endpoint,
                    type: 'GET',
                    dataType: 'json',
                    error: function() {
                        console.log('Error loading ' + field);
                        callback();
                    },
                    success: function(res) {
                        console.log('Success loading ' + json_namespace);
                        callback(res.data[json_namespace]);
                    }
                });
            }
        });
    };
    selectize_fields('#selectize-passion', '/api/v1/passions', 'passions');
    selectize_fields('#selectize-current-city', '/api/v1/cities', 'cities')

After the page loads, if I click on the text box no AJAX request is sent. However, on typing something, the request is sent.

[jbanety]

Hi @kevinisaac,
you can prefetch your items with the preload option set to true.

[kevinisaac]

@jbanety In addition to the preload option, I also had to remove this line : if (!query.length) return callback();. Thanks!