如何在 Rails 中使用 jquery tokeninput？

Posted 2023-05-09

【中文标题】如何在 Rails 中使用 jquery tokeninput？

【英文标题】：How to use jquery tokeninput in Rails?

【发布时间】：2013-08-18 19:02:36

【问题描述】：

我正在尝试在我的应用程序的表单中添加一个 tokeninput jquery 字段，以允许用户发布状态更新。我希望用户能够将作品（单独的模型）附加到状态更新中。我正在使用 act_as_taggable_on gem，并且我的查询指定了标签上下文“有效”。但是，该字段不会加载任何搜索结果。

我实际上有第二个令牌输入字段，允许用户将标签附加到状态更新，就像这个网站使用标签附加到这个问题单一样。它工作正常！我正在尝试镜像该功能以指定搜索作品模型的上下文，但我正在努力实现。

有什么想法吗？您的时间和帮助将不胜感激！以下是相关代码：

发布模型

attr_accessible :content, :tag_list, :work_list

acts_as_taggable_on :tags
acts_as_taggable_on :works

后控制器（更新）

def work_list
 query = params[:q]  
 @work_list = ActsAsTaggableOn::Tag.includes(:taggings).where("taggings.context = 'works'").where("tags.name ILIKE ?", "%#params[:q].downcase.to_s%").all
 @work_list = @work_list.select  |v| v.name =~ /#query/i 
  respond_to do |format|
    format.json  render :json => @work_list.map|w| :id => w.name, :name => w.name 
  end
end


def tags 
    query = params[:q]
    if query[-1,1] == " "
      query = query.gsub(" ", "")
      ActsAsTaggableOn::Tag.find_or_create_by_name(query)
    end

    #Do the search in memory for better performance

    @tags = ActsAsTaggableOn::Tag.all
    @tags = @tags.select  |v| v.name =~ /#query/i 
    respond_to do |format|
      format.json render :json => @tags.map|t| :id => t.name, :name => t.name 
    end
  end

表格

<%= f.text_field :tag_list, :id => "post_work_list",  "data-pre" => @post.work_list.map(&:attributes).to_json %>

javascript

$ ->
  $("#post_tags").tokenInput "/posts/tags.json",
    prePopulate: $("#post_tags").data("pre")
    preventDuplicates: true
    noResultsText: "No results, press space key to create a new tag."
    animateDropdown: false

$ ->
  $("#post_work_list").tokenInput "/posts/work_list.json",
    prePopulate: $("#post_work_list").data("pre")
    preventDuplicates: true
    noResultsText: "No results"
    animateDropdown: false

路线

get "posts/tags" => "posts#tags", :as => :tags
get "posts/work_list" => "posts#work_list", :as => :work_list

谢谢！

编辑：我清理了这个问题并更新了所有代码。我还在 enginhere.com 上进行了一次对话，该网站也有来自其他工程师的一些其他故障排除：

http://bit.ly/179kiqH

请继续上述 enginhere.com 对话，然后在此处发布最终的官方答案以获取赏金，请随时提供帮助！

再次感谢！

【参考方案1】：

这个主题的任何问题的惊人答案！

http://bloginius.com/blog/2013/12/31/how-integrate-acts-as-taggable-on-with-jquery-token-input-with-rails-3/

【讨论】：

请注意，link-only answers are discouraged，SO 答案应该是搜索解决方案的终点（相对于另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。

【参考方案2】：

如果您使用acts_as_taggable_on gem，它比在railscast 中更容易。

模特（帖子）：

acts_as_taggable_on :works

查看（表单）：

= f.text_field :work_list, "data-pre" => f.object.work_list.sort.collect |t| id: t, name: t  .to_json

JS：

$ ->
  $("#post_work_list").tokenInput "/posts/works.json",
    preventDuplicates: true,
    animateDropdown: false

【讨论】：

感谢您的回复！我无法让它工作，但这让我思考：为什么不将acts_as_taggable_on gem 用于像我用于标签的作品？我镜像了我用于标签的代码，但工作字段仍然无法工作。虽然我越来越近了！ javascript 加载，但当我在字段中键入任何内容时出现 500 错误。更新的问题。有任何想法吗？谢谢！！！

控制台服务器日志中的错误描述怎么办？在 #works 方法中捕获错误。

Started GET "/posts/works.json?q=op" 由 PostsController#works 作为 JSON 参数处理："q"=>"op" NameError（未初始化的常量 ActsAsTaggableOn::Work） : 在 1ms app/controllers/posts_controller.rb:28:in `works' 中完成 500 Internal Server Error

当您定义“acts_as_taggable_on :works”时，这意味着您将使用带有上下文“works”的 ActsAsTaggableOn::Tag 模型。因此，尝试将您的查询更改为 ActsAsTaggableOn::Tag.includes(:taggings).where("taggings.context = 'works'").where("tags.name ILIKE ?", "%#params[:q] .downcase.to_s%")

get "posts/works" => "posts#works", :as => :works - 将通过查询为您返回标签。应该在 posts#update 中创建新标签（表单操作的路径）。