jQuery标签 - 使用Rails4 / Simple_form输入

时间:2013-09-25 13:18:36

标签: jquery ruby-on-rails ruby-on-rails-4 simple-form jquery-tags-input

我正在 Simple_form acts_as_taggable 使用 Rails 4

  

我正在尝试为我的代码(atcs_as_taggable)实施 jQuery Tags Input

Tags_input 的HTML是:

   <input name="tagsinput" class="tagsinput" value="School,Teacher,Colleague" />

转换为 Simple_form

   <%= f.input :tag_list, input_html: { class: "tagsinput "} %>

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

我的Tags_input的JS很简单:

   $(".tagsinput").tagsInput({
    width: '300px'
   });

我缺少什么?

1 个答案:

答案 0 :(得分:14)

至于我,这个插件并不是你能用到的最好的。

我会选择

  1. 选择 http://harvesthq.github.io/chosen/
  2. jQuery Tokeninput http://loopj.com/jquery-tokeninput/
  3. 曾经喜欢第二次,但Chosen是一个很棒的插件,现在是我最喜欢的。

    至于在rails中实现它们:

    <强>选上的

    <强>的Gemfile

    group :assets do
      gem 'chosen-rails'
    end
    

    应用/资产/ Javascript角/ application.js中

    //= require chosen-jquery
    

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

    *= require chosen
    

    应用/资产/ Javascript角/ questions.js.coffee

    jQuery ->
      $('#question_tags_ids').chosen()
    

    <强>问题/ _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>
    

    jQuery Tokeninput

    应用/资产/ Javascript角/ application.js中

    //= require jquery.tokeninput
    

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

    *= require token-input-facebook
    

    应用/资产/ Javascript角/ questions.js.coffee

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

    <强>问题/ _form.html.erb

    <div class="field">
      <%= f.label :tag_tokens, "Tags" %><br />
      <%= f.text_field :tag_tokens, data: {load: @question.tags} %>
    </div>
    

    <强>模型/ question.rb

    attr_accessible :name, :tag_tokens
    attr_reader :tag_tokens
    
    def tag_tokens=(tokens)
      self.tag_ids = Tag.ids_from_tokens(tokens)
    end
    

    <强> 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
    

    <强>模型/ 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