[英]How to use jquery tokeninput in Rails?
我正在尝试在我的应用程序中的表单中添加一个tokeninput jquery字段,允许用户发布状态更新。 我希望用户能够将作品(单独的模型)附加到状态更新。 我正在使用act_as_taggable_on gem,我的查询指定标签上下文“工作”。 但是,该字段不会加载任何搜索结果。
我实际上有一个第二个tokeninput字段,允许用户将标签附加到状态更新,就像这个网站使用标签附加到此发行票。 它工作正常! 我正在尝试镜像该功能以指定搜索工作模型的上下文,并且我正在努力实现。
有任何想法吗? 非常感谢您的时间和帮助! 这是相关代码:
发布模型
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上进行对话,其他工程师也有其他一些故障排除方法:
欢迎在上面的enginhere.com对话中继续对话,然后在这里发布最终的官方答案,以获得赏金!
再次感谢!
如果你使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.