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

Question

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

我想像 google 一样在下拉列表中远程加载数据以获得建议。我跟着 documentation 但是 ajax 返回的 json 没有显示在下拉列表中。 ajax 调用成功，因为我的控制台显示返回 json:

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

下拉列表中只有："Add new..."。

这是我的 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);
                }
            });
        }
    })
});

这是我的输入框：

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

有什么想法吗？感谢您的帮助！

Answer 1

你的问题是你的服务 returns ["New York", "New Jersey", "New Mexico", "New Hampshire"]

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

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

您应该将服务更改为 return 值：

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

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

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

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

Remote loading data for dropdown suggestion in Selectize

jquery

ajax

json

selectize.js