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

2023-09-10 19:44:02 作者:弦斷心涼繁華逝

我有,我已经selectized的标签,工作正常的文本输入。我可以创建新的项目和他们正确显示。

I have a text input that I have selectized as tags which works fine. I can create new items and they are shown correctly.

我想在下拉菜单中的建议,像谷歌的远程加载数据。 我跟着文档,但它是由返回的JSON Ajax不是在下拉所示。 Ajax调用成功,因为我的控制台显示了这个返回的JSON:

I want to remote load data in the dropdown for suggestion like on google. I followed the documentation but the json which is returned by ajax is not shown in the dropdown. The ajax call succeed since my console shows this returned json:

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

目前仅仅是:加入新... ,在下拉列表

这是我的code与selectize:

This is my code with 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);
                }
            });
        }
    })
});

和这里是我的Inputfield:

and here is my Inputfield:

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

任何想法什么是错?感谢您的帮助!

Any ideas whats wrong? Thanks for your help!

推荐答案

您的问题,您的服务回报 [纽约,新泽西,新墨西哥,新罕布什尔]

Your issue that your service returns ["New York", "New Jersey", "New Mexico", "New Hampshire"]

但你的渲染功能正在搜索属性:

But your render function is searching for a value property:

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

您应该要么改变你的服务来回报价值的:

You should either change your service to return value's:

[{值:纽约},{值:新泽西},{值:新墨西哥},{值:新五虎将}]

或者改变你的渲染,只是使用的项目(不积极,这将工作):

Or change your render to just use the item (not positive this will work):

返回'&LT; D​​IV&GT; +越狱(item.value)+'&LT; / DIV&GT;';