Selectize 中下拉建议的远程加载数据

Question

我有一个文本输入，我选择它作为标签，效果很好。我可以创建新项目并且它们显示正确。

我想在下拉列表中远程加载数据以获取建议，例如在 google 上。 我关注了documentation，但是 ajax 返回的 json 没有显示在下拉列表中。 ajax 调用成功，因为我的控制台显示了这个返回的 json：

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

下拉菜单中只有：“添加 new...”。

这是我的选择代码：

<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);
                }
            });
        }
    })
});

这是我的输入框：

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

任何想法有什么问题吗？感谢您的帮助！

Answer 1

您的服务返回的问题 ["New York", "New Jersey", "New Mexico", "New Hampshire"]

但是您的 render 函数正在搜索 value 属性：

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

您应该更改您的服务以返回值：

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

或更改您的渲染以使用该项目：

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