jQuery / Select2：如何删除标签/令牌的空白默认下拉列表

I use the jQuery Select2 plugin to add tagging support to an input field
(source: http://ivaynberg.github.io/select2/).

我使用jQuery Select2插件为输入字段添加标记支持(来源:http://ivaynberg.github.io/select2/)。

Everything works as intended, my only problem is that this always shows a one-line default dropdown below the input when entering a tag.

一切都按预期工作,我唯一的问题是,在输入标签时,这总是会在输入下方显示单行默认下拉列表。

I assume this is caused by a functionality that allows you to preset different tags which then can be selected from this dropdown. This is nice if you use it but if you don't need it then it looks confusing.

我认为这是由一个允许您预设不同标签的功能引起的,然后可以从此下拉列表中选择。如果您使用它,这很好,但如果您不需要它,那么它看起来很混乱。

I tried removing the line tags:[''], from the instantiation but than the plugin doesn't work anymore.
Can someone tell me how I can get rid of this ?

我尝试从实例化中删除行标记:[''],但插件不再起作用。谁能告诉我怎么能摆脱这个?

My HTML input:

我的HTML输入:

<input type="text" class="form-control sel2Tags" id="tags" name="tags" />

My jQuery initialisation:

我的jQuery初始化:

$('.sel2Tags').select2({
    tags:[''],
    tokenSeparators: [','],
    multiple: true
});

Many thanks in advance, Tim.

蒂姆,非常感谢。

1 个解决方案

#1

You are setting a empty value inside your tags. You should change tags: [''] to tags:[].

您在标签内设置了一个空值。您应该将标签:['']更改为标签:[]。

With this, you still get a line below the input with the message No matches found.

有了这个,你仍然会在输入下方找到一行,并显示No matches found。

If you want to remove this line you can "hide" it. According to this issue on GitHub, you can do the following:

如果你想删除这一行,你可以“隐藏”它。根据GitHub上的这个问题,您可以执行以下操作:

<input type="text" class="form-control sel2Tags" id="tags" name="tags" 
    style="width:300px"  />

<style>
    .select2-hidden {
        display:none !important;
    }
</style>

<script>
    $('.sel2Tags').select2({
        tags:[],
        tokenSeparators: [','],
        multiple: true,
        formatNoMatches: function() {
            return '';
        },
        dropdownCssClass: 'select2-hidden'
    });
</script>

#1