jQuery标签 - 使用Rails4/Simple_form输入

Min*_*ohn 4 jquery ruby-on-rails simple-form ruby-on-rails-4 jquery-tags-input

我正在使用带有Simple_formacts_as_taggable的 Rails 4.

我正在尝试为我的标签(atcs_as_taggable)实现jQuery标签输入.

Tags_input的HTML 是:

   <input name="tagsinput" class="tagsinput" value="School,Teacher,Colleague" />
Run Code Online (Sandbox Code Playgroud)

Simple_form中进行翻译:

   <%= f.input :tag_list, input_html: { class: "tagsinput "} %>
Run Code Online (Sandbox Code Playgroud)

我在更改前输入的标签在编辑/表单中正确显示,但NEW标签未保存.

我的Tags_input的JS很简单:

   $(".tagsinput").tagsInput({
    width: '300px'
   });
Run Code Online (Sandbox Code Playgroud)

我错过了什么?

rma*_*002 15

至于我,这个插件并不是你可以使用的最好的插件.

我会去

  1. 选择 http://harvesthq.github.io/chosen/
  2. jQuery Tokeninput http://loopj.com/jquery-tokeninput/.

曾经喜欢第二次,但Chosen是一个很棒的插件,现在是我最喜欢的.

至于在rails中实现它们:

选择

的Gemfile

group :assets do
  gem 'chosen-rails'
end
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/ JavaScript的/ application.js中

//= require chosen-jquery
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/样式表/ application.css

*= require chosen
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/ JavaScript的/ questions.js.coffee

jQuery ->
  $('#question_tags_ids').chosen()
Run Code Online (Sandbox Code Playgroud)

问题/ _form.html.erb

<div class="field">
  <%= f.label :tag_ids, "Tags" %><br />
  <%= f.collection_select :tag_ids, Tag.order(:name), :id, :name, {}, {multiple: true} %>
</div>
Run Code Online (Sandbox Code Playgroud)

jQuery Tokeninput

应用程序/资产/ JavaScript的/ application.js中

//= require jquery.tokeninput
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/样式表/ application.css

*= require token-input-facebook
Run Code Online (Sandbox Code Playgroud)

应用程序/资产/ JavaScript的/ questions.js.coffee

jQuery ->
  $('#question_tag_tokens').tokenInput '/tags.json'
    theme: 'facebook'
    prePopulate: $('#question_tag_tokens').data('load')
Run Code Online (Sandbox Code Playgroud)

问题/ _form.html.erb

<div class="field">
  <%= f.label :tag_tokens, "Tags" %><br />
  <%= f.text_field :tag_tokens, data: {load: @question.tags} %>
</div>
Run Code Online (Sandbox Code Playgroud)

车型/ question.rb

attr_accessible :name, :tag_tokens
attr_reader :tag_tokens

def tag_tokens=(tokens)
  self.tag_ids = Tag.ids_from_tokens(tokens)
end
Run Code Online (Sandbox Code Playgroud)

tags_controller.rb

def index
  @tags = Tag.order(:name)
  respond_to do |format|
    format.html
    format.json { render json: @tags.tokens(params[:q]) }
  end
end
Run Code Online (Sandbox Code Playgroud)

车型/ tag.rb

def self.tokens(query)
  tags = where("name like ?", "%#{query}%")
  if tags.empty?
    [{id: "<<<#{query}>>>", name: "New: \"#{query}\""}]
  else
    tags
  end
end

def self.ids_from_tokens(tokens)
  tokens.gsub!(/<<<(.+?)>>>/) { create!(name: $1).id }
  tokens.split(',')
end
Run Code Online (Sandbox Code Playgroud)