Autocomplete 选择ize.js更新标记并使用自动完成

Autocomplete 选择ize.js更新标记并使用自动完成,autocomplete,tagging,selectize.js,Autocomplete,Tagging,Selectize.js,我想做的是: 我有相关标签的食谱 在我的编辑表单中,我希望: 显示已与配方关联的标签 添加新标签。在这里,我想通过询问数据库中已有的标记来使用autocomplete 这是我的剧本: var $select = $('#tags').selectize({ valueField: 'id', labelField: 'value', searchField: 'value',

我想做的是:

我有相关标签的食谱

在我的编辑表单中,我希望:

  • 显示已与配方关联的标签
  • 添加新标签。在这里,我想通过询问数据库中已有的标记来使用autocomplete
这是我的剧本:

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
var$select=$('#标记')。选择({
valueField:'id',
labelField:'值',
searchField:'值',
选项:[
@foreach($recipe->标记为$tag)
{id:{$tag->id},值:{{{$tag->tag_slug}},
@endforeach
],
创造:真的,
呈现:{
选项:功能(项目,转义){
返回“”+
''+转义(项值)+''+
'';
}
},
加载:函数(查询、回调){
如果(!query.length)返回callback();
$.ajax({
url:“/search/tag_autocomplete”,
键入:“GET”,
数据:{
术语:查询
},
错误:函数(){
console.log('error');
回调();
},
成功:功能(res){
//console.log(res[0].value);
回收(res);
}
});
}
});
var selectize=$select[0]。selectize;
@foreach($recipe->标记为$tag)
选择ize.addItem({{$tag->id}});
@endforeach
通过使用此选项,“自动完成”仅显示已使用的标记。如果我使用: 选项:[] 然后自动完成将显示所有可用的标记,但我错过了已经使用的标记

我如何使用这两种方法:

  • 显示附加的标记和
  • 对所有现有标记使用自动完成