jQuery / Select2: How to remove blank default dropdown for tags / tokens

Question

I use the jQuery Select2 plugin to add tagging support to an input field
(source: 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 any more. How can I get rid of this?

My HTML input:

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

My jQuery initialisation:

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

Answer 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.

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

<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>