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

Posted 2023-05-09

【中文标题】在页面上的多个输入上使用 tokeninput jquery 插件

【英文标题】：using tokeninput jquery plugin on more than one input on a page

【发布时间】：2011-08-30 20:10:31

【问题描述】：

我正在使用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，如果我在顶部使用#shareholder 选择器移动jQuery 代码，则令牌输入代码适用于#shareholder，但停止适用于另一个。我怎样才能让它对他们俩都有效？？

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

【参考方案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。

【讨论】：

我很久以前就有了，谢谢。我不确定问题出在哪里，但我记得它与 html 标记中的 data-url 参数有关。

@RobinBrouwer 以后添加的未来元素呢？