Can't add Tag that doesn't exist in data source

[attiqeurrehman]

Hi,

I am trying to maintain grades tag in an application and it works for existing data fetched from the server but when I try to add new it submits the form. I have tried to trap the beforeItemAdd but it doesn't stops there. Here's my code:

var grades = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '../api/Grades?query=%QUERY',
                filter: function(list) {
                    return $.map(list, function(grade) {
                        return { name: grade.Name, id: grade.Id };
                    });
                }
            }
        });

        grades.initialize();
        var gradesOptions = {
            trimValue: true,
            maxTags: 3,
            freeInput: true,
            itemValue: 'id',
            itemText: 'name',
            typeaheadjs: {
                name: 'grades',
                displayKey: 'name',
                source: grades.ttAdapter()
            }
        };
        $('.grades').tagsinput(gradesOptions);

Any pointers?

Thanks, Attiqe

[RedNoo]

+1

[wstaelens]

same issue. with freeInput: true enabled,

Let's say I want to add non-existing tag "test" but there is already in the dropdownsuggestion one or multiple tags that contain "test" like "retest" then I cannot add the new tag "test", it will always select one from the suggestions dropdown like "retest".