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

Question

我正在使用来自loopj.com的jquery tokeninput插件这是我的JS文件：

\n\n

$(document).ready(function() {\n\n    // Token input plugin:\n\n    $("#issuer").tokenInput("/issuers.json",{\n        crossDomain: false,\n        theme: "facebook",\n        prePopulate: $("#issuer").data("pre"),\n        preventDuplicates: true\n    });\n\n    $("#shareholder").tokenInput("/shareholders.json",{\n        crossDomain: false,\n        theme: "facebook",\n        prePopulate: $("#shareholder").data("pre"),\n        preventDuplicates: true\n    });\n\n});\n

\n\n

这是我的标记：

\n\n

<form method="post" action="/certificates" accept-charset="UTF-8">\n<input type="hidden" value="\xe2\x9c\x93" name="utf8">\n<input type="hidden" value="fSO/GJxIGEHLCb/zmd1B7qTwUYnGx5yyIxWTkEk/ies=" name="authenticity_token">\\\n\n  <div class="field">\n    <label for="issuer">Issuer</label><br>\n    <input type="text" size="30" name="certificate[issuer]" id="issuer" data-pre="[null]">\n  </div>\n\n <div class="field">\n    <label for="shareholder">Shareholder</label><br>\n    <input type="text" size="30" name="certificate[shareholder]" id="shareholder" data-pre="[null]">\n  </div>\n</form>\n

\n\n

我的 tokenize 插件可以工作#issuer，但不能工作，如果我使用顶部的选择器#shareholder移动 jQuery 代码，则令牌输入代码适用于，但不再适用于另一个。我怎样才能让它对他们俩都起作用？#shareholder#shareholder

\n\n

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

\n

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。