使用tokeninput jQuery插件上的多个输入页面上

Question

我使用的jquery tokeninput plugin from loopj.com这里是我的JS文件：

$(document).ready(function() { 

    // Token input plugin: 

    $("#issuer").tokenInput("/issuers.json",{ 
     crossDomain: false, 
     theme: "facebook", 
     prePopulate: $("#issuer").data("pre"), 
     preventDuplicates: true 
    }); 

    $("#shareholder").tokenInput("/shareholders.json",{ 
     crossDomain: false, 
     theme: "facebook", 
     prePopulate: $("#shareholder").data("pre"), 
     preventDuplicates: true 
    }); 

}); 

这里是我的标记：

<form method="post" action="/certificates" accept-charset="UTF-8"> 
<input type="hidden" value="✓" name="utf8"> 
<input type="hidden" value="fSO/GJxIGEHLCb/zmd1B7qTwUYnGx5yyIxWTkEk/ies=" name="authenticity_token">\ 

    <div class="field"> 
    <label for="issuer">Issuer</label><br> 
    <input type="text" size="30" name="certificate[issuer]" id="issuer" data-pre="[null]"> 
    </div> 

<div class="field"> 
    <label for="shareholder">Shareholder</label><br> 
    <input type="text" size="30" name="certificate[shareholder]" id="shareholder" data-pre="[null]"> 
    </div> 
</form> 

我的记号化插件作品在#issuer但不#shareholder，如果我移动jQuery代码#shareholder选择器在顶部的令牌输入代码工作#shareholder但停止工作的另一个。我怎么能为他们两个工作？

此外，如果我在编辑模式下具有相同的标记相同的表单 - 这意味着data-pre有一个有效的JSON而不是[null]，令牌输入适用于这两个字段。

Answer 1

我真的不知道为什么它不适合你。我通常使用这个脚本tokenInput添加到多个领域：

$(".token_input").each(function(){ 
    var el = $(this); 
    el.tokenInput(el.data("url"), { 
    crossDomain: false, 
    theme: "facebook", 
    prePopulate: el.data("pre"), 
    preventDuplicates: true 
    }); 
}); 

添加token_input为一类和data-url属性输入字段是很重要的。下面是我如何做到这一点（在Rails中）：

<%= f.text_field :issuer_tokens, :class => "token_input", "data-url" => "/issuers.json", "data-pre" => @certificate.issuers.map(&:attributes).to_json %> 
<%= f.text_field :shareholder_tokens, :class => "token_input", "data-url" => "/shareholders.json", "data-pre" => @certificate.shareholders.map(&:attributes).to_json %> 

希望它适合你。如果不起作用，请尝试下载新版本的tokenInput。