How to prepopulate tokenput with values found in database

Question

I am using the tokeninput control found here at http://loopj.com/jquery-tokeninput/ - its quite popular I believe.

I have the following code that fills the input box nicely with author names - but I want to prepopulate the control with values found in the database when the user is in an EDIT session i.e. to find authors that have been found for that record already (looks something like this):

Here's the code:

 $("#authorlist").tokenInput('/author/getauthors/', {
        hintText: "Enter surname",
        searchingText: "Searching...",
        preventDuplicates: true,
        allowCustomEntry: true,
        highlightDuplicates: false,
        tokenDelimiter: "*",
        theme: "facebook"
//        prePopulate: [{"id": 5016, "name": "Test 1" }]
    });

Obviously this already gets a full list of authors (/author/getauthors/) - but it needs to prepopulate from that list too, with authors already found that record - and thats the bit I can't seem to figure out.

I can see that that you can use prePopulate in the javascript (I've commented it out) and I have the found author values in my Edit.cshtml i.e.

@foreach(var item in Model.AUTHORs.Select(model => new { model} ))
        {
            <div type="hidden" id="authorHidden" > @item.model.FULL_NAME</div>
        }

So it's just a case of putting those values in some kind of json format and getting the tokeninput control to populate them ready for when the form is loaded and shown to the user.

Other code for displaying the tokeninput control in Edit.cshtml is:

<div class="editor-label">Authors</div>
     <div class="authors">
         <div class="editor-field">
             <input type="text" id="authorlist" name="tiAuthors" />
         </div>
     </div>

Any help or pointers are much appreciated.

Answer 1

You could use an HTML5 data-* attribute on your input inside the view to put the list of authors that you want to be prepopulated:

<input type="text" id="authorlist" name="tiAuthors" data-authors="@Json.Encode(Model.AUTHORs.Select(a => new { id = a.AuthorId, name = a.AuthorName })))" />

and then:

$('#authorlist').tokenInput('/author/getauthors/', {
    hintText: 'Enter surname',
    searchingText: 'Searching...',
    preventDuplicates: true,
    allowCustomEntry: true,
    highlightDuplicates: false,
    tokenDelimiter: '*',
    theme: 'facebook',
    prePopulate: $('#authorlist').data('authors')
});