I am using jquery plugin Tokeninput. I need to prevent user from entering duplicate values, the Js code is as follows:

$(document).ready(function () {
    // Configure Tags
    $('#Tags').tokenInput(tagSource(), 
    {
        prePopulate: selectedTags(),
        theme: "facebook",
        propertyToSearch: "Code",
        preventDuplicates: true
     });

    function tagSource() {
        var data = [];
        @if (Model.SourceTags != null && Model.SourceTags.Count() > 0) {
            <text>
                data = @(Html.Raw(Model.SourceTags));
            </text>
        }
        return data;
    }

    function selectedTags() {
        var selectedData = [];
         @if (Model.SelectedTags != null && Model.SelectedTags.Count() > 0) {
            <text>
                selectedData = @(Html.Raw(Model.SelectedTags));
            </text>
        }
        return selectedData;
    }
});

When I select the same item again, the existing item in the Input field is highlighted and nothing is added.

Also, when I select a different item, the first item is highlighted and nothing is added.

Any idea?

Thanks

Edit
Report