使用没有默认“名称”的 jquery TokenInput

Posted

技术标签:

【中文标题】使用没有默认“名称”的 jquery TokenInput【英文标题】:Using jquery TokenInput without default 'name' 【发布时间】:2011-10-12 18:22:41 【问题描述】:

我正在尝试使用此处找到的 jquery tokeninput:http://loopj.com/jquery-tokeninput/ 遵循 railcasts 的指南:http://railscasts.com/episodes/258-token-fields

默认情况下,它需要 table/json 上的“名称”列..

有什么方法可以自定义以将其更改为其他内容(在我的情况下为“account_number”)?

(在直播中,他说如果您没有“名称”列,则需要额外的自定义)

【问题讨论】:

更新了答案,详细说明了更改搜索逻辑。 【参考方案1】:

神奇的线条是

<%= f.text_field :author_tokens, "data-pre" => @book.authors.map(&:attributes).to_json %>

format.json  render :json => @authors.map(&:attributes) 

这些行将从 table 读取的数据转换为 jquery-tokeninput 可以理解的 json。它将模型中的所有数据传递到 jquery-tokeninput 中,但这不是必需的。 Tokeninput,只需要两个字段,

    id -> 对于每个选定的令牌,这与表单一起发布 name -> 用作令牌的标签

如果您不想在模型中包含name 字段,并且想使用account_number 作为标签,您可以按照以下方式进行:

<%= f.text_field :author_tokens, "data-pre" => @book.authors.collect |author| :id => author.id, :name => author.account_number   %>

format.json  render :json => @authors.collect |author| :id => author.id, :name => author.account_number  

基本上,改变传递给tokeninput的json。将accoun_number 传递为name

更新:

将此行更改为更适合您的内容:

@authors = Author.where("name like ?", "%#params[:q]%")

一个建议可能是:

@authors = Author.where("name like ?", "#params[:q]%")

删除第一个%,但真的取决于你的数据类型和所有。

【讨论】:

知道了!!!你是最棒的!!在你出现之前,我正处于放弃的边缘。 很高兴为您提供帮助 :)。不知道有关于这个话题的 railscast,直到最近我才看到一些关于 SO 的问题。 很抱歉在说一切都很好但只是遇到了一个小错误之后提出了一个后续问题。当我去找作者(我的案例 pi_name)时,预填充填充了大约 20 个“未定义”' s.. 这是我的代码:&lt;%= f.text_field :account_number_tokens, "data-pre" =&gt; @pi_name.account_numbers.collect |account_number| :id =&gt; account_number.id, :name =&gt; account_number.accoun t_number %&gt; 有一个悬挂空间,我可以在account_number.accoun t_number 中看到,可能只是一个错字。收集后不要忘记to_json 两点确保,首先,模型account_number中有一个字段account_number,其次,在collect末尾添加to_json【参考方案2】:

只需添加“propertyToSearch”选项:

$(function() 
  $("#user_tokens").tokenInput("/users.json", 
    crossDomain: false,
    propertyToSearch: "account_number",
    theme: "facebook",
  );
);

【讨论】:

以上是关于使用没有默认“名称”的 jquery TokenInput的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 中的 DOM 选择器,用于没有 ID 或 CLASS 名称标签的元素

jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

上传的文件的临时名称没有进入 blueimp jQuery 文件上传

JQuery Datepicker - 没有默认日期

想要在 JQuery 中测试背景颜色的名称

如何使用 jquery 和 php 从动态数据中设置默认下拉列表?