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

Question

我正在使用来自loopj.com的jquery tokeninput插件，这是我的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] ，那么Token Input会对这两个字段都起作用。

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。