如何在Rails中使用jquery标记输入

How to use jquery tokeninput in Rails?

本文关键字:jquery 输入 Rails      更新时间:2023-09-26

我正试图在我的应用程序中的表单中添加一个标记输入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对话中继续对话,然后在这里发布赏金的最终官方答案!

再次感谢!

这个主题的任何问题都能得到惊人的回答!

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

如果您在gem上使用acts_as_tagtable_on,这比在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