Prepopulate jquery token input textbox

Question

on the page load i have a token input ie,

  $('.txtWard').tokenInput(ward, {
                                        theme: 'facebook',
                                        allowCustomEntry: true,
                                        preventDuplicates: true,
                                        tokenDelimiter: '*',
                                        searchingText: 'Searching...'
                                    });

but the problem is when i click on another button i want to pre-populate items to this token input textbox.when i using the below code the textbox duplicating as another textbox.

  $(document).ready(function () {
            $('.txtWard').tokenInput(ward, {
                theme: 'facebook',
                allowCustomEntry: true,
                preventDuplicates: true,
                tokenDelimiter: '*',
                searchingText: 'Searching...'
            });
            $('#btnGet').click(function () {
                var prepopulateWards = new Array();
                $.ajax({
                    type: "POST",
                    url: "FetchWard",
                    data: JSON.stringify({ patientNo: $('#txtPatientNo').val(), locale: 'en-US' }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        for (var j = 0; j < result.wards.length; j++) {
                            prepopulateWards.push({ id: result.wards[j].Code, name: result.wards[j].ward });
                        }
                    }
                });
                $('.txtWard').tokenInput(ward, {
                    theme: 'facebook',
                    allowCustomEntry: true,
                    preventDuplicates: true,
                    tokenDelimiter: '*',
                    searchingText: 'Searching...',
                    prePopulateFromValue: true,
                    prePopulate: prepopulateWards
                });
            });

        });

Will you post what you have stored in the `prepopulateWards` variable, so we can suggest something? But yes, I don't think you mean to be creating the tokenInput twice. — Chris, Aug 13 '13 at 11:30
If Lee's solution below isn't correct, then I think you're misunderstanding how prePopulate is intended to be used. What activity are you looking for when you're adding the wards? Do you want them to appear as tokens in the text box, or do you just want them to be added to the list of searchable items? PrePopulate is for tokens you want in place when the TokenInput is first loaded, otherwise 'add' as Lee said, seems like the solution you're after. — Chris, Aug 14 '13 at 10:02

score 4 · Answer 1 · answered Aug 13 '13 at 09:34

You really should read the documentation. I've never seen this plugin before but managed to work out how to add tokens to the input within seconds.

Instead of trying to instantiate the plugin twice on the same textbox, use the method provided to add token's to the input box.

http://loopj.com/jquery-tokeninput/

Methods

selector.tokenInput("add", {id: x, name: y});
Add a new token to the tokeninput with id x and name y.

So the click handler of your button (or submit if its a form submit button), should be something like:

$('.txtWard').tokenInput('add',ward);

Assuming ward is a valid object in the format required, and i'm ofcourse making assumptions on what your code does. But thats roughly what you need to do.

thanks for your reply, but i don't want to "add" items to token input but i need to pre-populate (`prePopulate: prepopulateWards` ) already existing items in the token input textbox on another event — user2119324, Aug 13 '13 at 09:43
So remove the first `tokenInput` initializer, and init the tokenInput when you click the button? — Lee, Aug 13 '13 at 09:54

score 3 · Answer 2 · answered Feb 10 '17 at 11:02

$(document).ready(function() {
            $("#demo-input-pre-populated").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
                prePopulate: [
                    {id: 123, name: "Slurms MacKenzie"},
                    {id: 555, name: "Bob Hoskins"},
                    {id: 9000, name: "Kriss Akabusi"}
                ]
            });
        });

http://loopj.com/jquery-tokeninput/demo.html#pre-populated

score 0 · Answer 3 · answered May 17 '17 at 04:05

If we are getting data from db with comma separated then
var prepopulateWards = new Array();

   var mail = response.d.Data.split(',');
   $(mail).each(function (index, item) {
       prepopulateWards.push({ name: item });
   });



$('#txt_Recipients').tokenInput(
   {
     //theme: "facebook",
     preventDuplicates: true,
     prePopulateFromValue: true,
     prePopulate: prepopulateWards
            });


});

Prepopulate jquery token input textbox

3 Answers3