selectize.js 和 ajax 的问题

Question

在我看来，我有以下代码，我正在尝试让 select 框下拉，其中包含我通过回调发送的值，但不幸的是它不起作用。

我一直在关注 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>

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

更新了反对者的建议。

            $('#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 。保持基本。

selectize.js 和 ajax 的问题

Issues with selectize.js and ajax

javascript

jquery

ajax

selectize.js