远程加载数据的Selectize下拉建议 [英] Remote loading data for dropdown suggestion in Selectize

问题描述

我有，我已经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;';

这篇关于远程加载数据的Selectize下拉建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！