JQuery TokenInput

Question

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>

score 2 · Accepted Answer · answered Aug 23 '12 at 12:43

2

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>" },
    });
});

answered Aug 23 '12 at 12:43

Nicos Karalis

3,724
4
33
62

What is this resultsFormatter used for ? – Marie Luise Aug 23 '12 at 12:49
1

tokenFormatter is to format the token that is selected, resultsFormatter is the formatter of the search list – Nicos Karalis Aug 23 '12 at 12:51
the ``item`` on that formatter function is a object mapped of the object given as a json. that means you can format your html string any way you want, like this: ``'
'+ item.name +'

Nicos Karalis

Aug 23 '12 at 12:54

Done thanks... Now in the form I have one ul and li's for each token what will be the best way to insert each entry in the database? – Marie Luise Aug 23 '12 at 12:56

One more thing the ul with all the tokens is pre populated but not in the textarea its outside the text area.. why is that ? – Marie Luise Aug 23 '12 at 12:59

you dont have to do that, the tokenInput plugin fills your field with an array of strings, usually the ids, with this, when the user submits the form, you can get it from the server side. – Nicos Karalis Aug 23 '12 at 12:59

if this question answered you, consider accepting it. thank you – Nicos Karalis Aug 23 '12 at 13:00

it all depends of your css, the base css of tokenInput should fix it with a little hack – Nicos Karalis Aug 23 '12 at 13:01

You mean the input field I created for tokens is filled with array of strings ? – Marie Luise Aug 23 '12 at 13:23

but my input is hidden and it does not contain any ids – Marie Luise Aug 23 '12 at 13:31

score 2 · Answer 2 · answered Aug 26 '13 at 13:01

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
}

JQuery TokenInput

2 Answers2