Remote loading data for dropdown suggestion in Selectize

Question

I have a text input that I have selectized as tags which works fine. I can create new items and they are shown correctly.

I want to remote load data in the dropdown for suggestion like on google. I followed the documentation but the json which is returned by ajax is not shown in the dropdown. The ajax call succeed since my console shows this returned json:

["New York", "New Jersey", "New Mexico", "New Hampshire"]

There is just the: "Add new..." in the dropdown.

This is my code with selectize:

<script>
$(function() {
    $('.offerInput').selectize
    ({
        delimiter: '♥',
        plugins: ['remove_button'],
        valueField: 'value',
        labelField: 'value',
        searchField: 'value',
        openOnFocus: true,
        options: [],
        create: function(input)
        {
            return {
                value: input,
                text: input
            }
        },
        render: {
            option: function (item, escape) {
                console.log(item);
                return '<div>' + escape(item.value) + '</div>';
            }
        },
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: '/as/' + query,
                type: 'GET',
                dataType: 'json',
                error: function () {
                    callback();
                },
                success: function (res) {
                    console.log(res);
                    callback(res);
                }
            });
        }
    })
});

and here is my Inputfield:

<input type="text" id="appbundle_offers" name="appbundle_[offers]" required="required" placeholder="offers" class="offerInput selectized" value="" tabindex="-1" style="display: none;">

Any ideas whats wrong? Thanks for your help!

Answer 1

Your issue that your service returns ["New York", "New Jersey", "New Mexico", "New Hampshire"]

But your render function is searching for a value property:

render: {
     option: function (item, escape) {
         console.log(item);
         return '<div>' + escape(item.value) + '</div>';
     }
 }

You should either change your service to return values:

[{"value":"New York"},{"value":"New Jersey"},{"value":"New Mexico"},{"value":"New Hampshire"}]

Or change your render to use the item:

return '<div>' + escape(item) + '</div>';