Question

我有一个文本输入，我已选择作为标签工作正常。我可以创建新项目并正确显示。

我想在下拉列表中远程加载数据，以便像谷歌一样提出建议。我跟着documentation，但是ajax返回的json没有显示在下拉列表中。自从我的控制台显示返回的json后，ajax调用成功了：

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

下拉列表中只有：“添加新... ”。

这是我的代码选择：

<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>';

在Selectize

1 个答案: