CODEWITHSUNDEEP
jqueryjquery-tokeninput
Marie Luise
Marie Luise

Reputation: 5

JQuery TokenInput

I am using jQuery tokeninput to pre-populate a text area. I have an array of JSON to pre-populate the text area, The text area is populated correctly but when I look at the <li>'s created by this plugin it just contain the name of each entry.

How can I get the rest of the information about each entry? In my case like the description, order etc. I need it because I need to insert all these entries into a database.

My jQuery is

<script type="text/javascript">
    $(document).ready(function() {
        $("#text-area").tokenInput("", {
            theme: "facebook",
            prePopulate: [
                          {"id":"04d0d4b2-ac25-11e1-96a5-9787dec335c2","name":"Group 1","description":"Description of Patent Group 1","order":56250000,"is_deleted":false},
                          {"id":"9d4f6e5c-dd73-11e1-bed3-fbfe082dc‌​761","name":"Group 3","description":"Description of Patent Group 3","order":70312500,"is_deleted":false},
                          {"id":"06d0d4b2-ac25-11e1-96a5-9787dec33‌​5c2","name":"Group 2","description":"Description of Patent Group 2","order":84375000,"is_deleted":false}
                         ]
        });
    });
</script>

Upvotes: 0

Views: 6808

Answers (2)

Vinod Kumar
Vinod Kumar

Reputation: 85

You can use onAdd,onDelete functions to store the selected item description,order into some variable.

onAdd:function(item)
{
    alert(item.description);
    alert(item.order);
    //push into array
}
onDelete:function(item)
{
    //remove from array
}

Upvotes: 2

Nicos Karalis
Nicos Karalis

Reputation: 3773

you need to use the tokenFormatter option:

A function that returns an interpolated HTML string for each token. Use this function with a templating system of your choice, such as jresig microtemplates or mustache.js. Use this when you want to include images or multiline formatted tokens. Quora’s people invite token field that returns avatar tokens is a good example of what can be done this option.

default: function(item){ return “<li><p>” + item.propertyToSearch + “</p></li>” } (demo).

like this:

$(document).ready(function() {
    $("#text-area").tokenInput("", {
        theme: "facebook",
        prePopulate: [
                      {"id":"04d0d4b2-ac25-11e1-96a5-9787dec335c2","name":"Group 1","description":"Description of Patent Group 1","order":56250000,"is_deleted":false},
                      {"id":"9d4f6e5c-dd73-11e1-bed3-fbfe082dc‌​761","name":"Group 3","description":"Description of Patent Group 3","order":70312500,"is_deleted":false},
                      {"id":"06d0d4b2-ac25-11e1-96a5-9787dec33‌​5c2","name":"Group 2","description":"Description of Patent Group 2","order":84375000,"is_deleted":false}
                     ],
        resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.description + " " + item.order + "</div><div class='email'>" + item.is_deleted + "</div></div></li>" },
        tokenFormatter: function(item) { return "<li><p>" + item.name + " <b style='color: red'>" + item.description + "</b></p></li>" },
    });
});

Upvotes: 2

Related Questions