selectize.js更新代码并使用自动填充

时间:2017-09-03 12:19:05

标签: autocomplete tagging selectize.js

我尝试做什么:

我有相关标签的食谱。

在我的编辑表格中,我想:

  • 使用配方
  • 显示已关联的标签
  • 添加新标签。在这里,我想通过向数据库询问已有的标签来使用自动完成。

这是我的剧本:

var $select = $('#tags').selectize({
                valueField: 'id',
                labelField: 'value',
                searchField: 'value',
                options: [
                    @foreach ($recipe->tagged as $tag)
                    {id: {{ $tag->id }}, value: '{{ $tag->tag_slug }}'},
                    @endforeach
                    ],
                create:true,
                render: {
                    option: function(item, escape) {

                        return '<div>' +
                                '<span class="name">' + escape(item.value) + '</span>' +
                                '</div>';
                    }

                },
                load: function(query, callback) {
                    if (!query.length) return callback();
                    $.ajax({
                        url: '/search/tag_autocomplete',
                        type: 'GET',
                        data: {
                            term: query
                        },
                        error: function() {
                            console.log('error');
                            callback();
                        },
                        success: function(res) {
                            //console.log(res[0].value);
                            callback(res);
                        }
                    });
                }

            });


            var selectize = $select[0].selectize;
            @foreach ($recipe->tagged as $tag)
            selectize.addItem({{ $tag->id }});
            @endforeach

通过使用此功能,自动完成功能仅显示已使用的标签。如果我使用: 选项:[] 然后自动完成将显示所有可用的标签,但我想念已经使用过的标签。

我如何同时使用两者:

  1. 显示附加的标签和
  2. 对所有现有代码使用自动填充功能。

0 个答案:

没有答案