我正在使用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>
我的 tokenize 插件适用于 #issuer
但不适用于 #shareholder
,如果我使用顶部的 #shareholder
选择器移动 jQuery 代码 token 输入代码适用于 #shareholder
,但不适用于另一个。我怎样才能让它对他们两个都起作用?
此外,如果我在编辑模式下具有相同的表单和相同的标记 - 这意味着 data-pre
有一个有效的 JSON 而不是 [null]
, token 输入适用于这两个领域。
最佳答案
我真的不知道为什么它对你不起作用。我通常使用这个脚本将 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。
关于jquery - 在页面上的多个输入上使用 tokeninput jquery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6092279/