selectize.js和Ajax问题

Question

在我看来，我有以下代码，并且我试图使选择框与我通过回调发送的值一起下拉，但是不幸的是它不起作用。

我遵循http://maxoffsky.com/code-blog/laravel-shop-tutorial-3-implementing-smart-search/进行了一些细微改动，以适应我的用例。

<script>

    $(document).ready(function(){
        var root = '{{url("/")}}';

        $('#testselect').selectize({
            valueField: 'url',
            labelField: 'description',
            searchField: ['description'],
            maxOptions: 10,
            options: [],
            create: true,
            render: {
                option: function(data, escape) {
                    return '<div>' + escape(data.description) + '</div>';
                }
            },
            optgroups: [
                {value: 'description', label: 'description'},
            ],
            load: function(query, callback) {
                if (!query.length) return callback();
                $.ajax({
                    url: root+'/gettimecodes',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        q: query
                    },
                    error: function() {
                        callback();
                    },
                    success: function(res) {
                        console.log(res.data) // Prints my data all well and good.
                        var object = {description:"description"};
                        var array = ["Saab", "Volvo", "BMW"];
                        var json = {
                            "data":[
                                {"description":"Saab"},
                                {"description":"Volvo"},
                                {"description":"BMW"}
                            ]
                        }
                        // callback(array); // Doesn't work. (Array)
                        // callback(object); // Doesn't work (Object)
                        // callback(json); // Doesn't work (JSON)
                    }
                });
            },
        });
    });

</script>

如果有人能指出我正确的方向，将不胜感激！

更新了bashers的建议。

            $('#testselect').selectize({
            valueField: 'description',
            labelField: 'description',
            searchField: ['description'],
            maxOptions: 10,
            options: [],
            create: true,
            render: {
                option: function(data, escape) {
                    return '<div>' + escape(data.description) + '</div>';
                }
            },
            load: function(query, callback) {
                if (!query.length) return callback();
                $.ajax({
                    url: '/gettimecodes',
                    type: 'GET',
                    data: {
                        q: query
                    },
                    error: function() {
                        callback();
                    },
                    success: function(res) {
                        callback(res.data)
                    }
                });
            },
        });

响应中返回的JSON

{"data":[{"description":"Crushed blacks "},{"description":"Crushed     blacks "},{"description":"Example of crushed blacks"},{"description":"Example of crushed blacks and video noise"},{"description":"Example of heavily de-interlaced artfacts on footage during title sequence - As source"}]}

Answer 1

您的valueField不存在。 url不是您传递的对象的属性。 将valueField更改为description 。 然后，如果您遇到一个更具体的错误，请通知我。 现在也删除optGroups 。 保持基础。