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>

Answer 1

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