CODEWITHSUNDEEP
javascriptjquery
Bill
Bill

Reputation: 2352

tokeninput jquery plugin - preventDuplicates not working

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

Upvotes: 8

Views: 1745

Answers (2)

Awais Afridi
Awais Afridi

Reputation: 138

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

Upvotes: 1

thecoalman
thecoalman

Reputation: 151

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

Upvotes: 8

Related Questions