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

Question

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

我有以下代码可以很好地使用作者名称填充输入框 - 但我想在用户处于编辑会话时使用数据库中找到的值预填充控件，即找到已为该记录找到的作者已经（看起来像这样）：

以下是代码：

 $("#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

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

<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')
});