如何使用在数据库中找到的值预填充tokenput

Question

我正在使用http://loopj.com/jquery-tokeninput/上的tokeninput控件- 我相信它非常受欢迎.

我有以下代码,可以很好地填充输入框和作者姓名 - 但我希望在用户处于EDIT会话时使用数据库中找到的值预填充控件,即找到已经找到该记录的作者(看起来像这样的东西):

这是代码:

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

显然,这已经获得了完整的作者列表(/ author/getauthors /) - 但它也需要从该列表中预先填充,作者已经找到了记录 - 这就是我似乎无法弄清楚的.

我可以看到你可以在javascript中使用prePopulate(我已经注释掉了)并且我在Edit.cshtml中找到了找到的作者值,即

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

所以这只是将这些值放在某种json格式中并获得tokeninput控件以便在表单加载并向用户显示时填充它们的情况.

在Edit.cshtml中显示tokeninput控件的其他代码是:

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

任何帮助或指针都非常感谢.

Answer 1

您可以data-*在视图内的输入上使用HTML5 属性来放置要预填充的作者列表:

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

然后:

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