tokeninput jquery plugin - preventDuplicates not working

Question

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

Answer 1

In case you are still having this problem, I think I might know what is going on. TokenInput assumes that the "id" attribute of your data object is spelled exactly as "id" (note the lowercase). If your id attribute is spelled any differently, what you described will happen. For your reference, this happens in the add_token function (line 495 in the js file in v1.6.0 tokeninput.js).

Answer 2

the best way is to limit the drop down search list. by removing the selected items in the textfield.

"SELECT id, title from job_categories WHERE id NOT IN (".$member->category_id.") AND title LIKE '%%%".$this->input->get('q')."%%' ORDER BY id DESC LIMIT 10"

this query will remove the prePopulate values from the list being selected again