CODEWITHSUNDEEP
jqueryruby-on-rails-3jquery-chosen
DaveG
DaveG

Reputation: 1203

Using Chosen Plugin with Rails Select

I'm trying to implement autocomplete with the chosen gem for rails. Which is a javascript plugin by harvest here

I'm using rails 3.2.8 & Simple Form 2.0.2 I'm trying to implement it in a form that is using the simpleform gem. In simpleform I'm using the association method to select all of the institutions (another table in database) that the user can/could belong to.

I've been trying to piece it together from combining 2 railscasts episodes #102, and #258

I've installed the gem in my gem file

gem 'chosen-rails'

I've put the require items in application.js 

//= require chosen-jquery

& application.css

 *= require chosen

I've placed the call in my users.js.coffee file

jQuery ->
  $('#user_bankinst_name').chosen();

Here is the form that I'm trying to use the plugin on. It's the "f.association" line.

            <%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
              <%= f.error_notification %>
                <%= f.input :email, :required => true, :autofocus => true, :label => 'Username ( Your Email )', :placeholder => 'Email Address' %>
                <%= f.input :password, :required => true, :autofocus => true, :label => 'Password', :placeholder => 'Password' %>
                <%= f.input :password_confirmation, :required => true, :autofocus => true, :label => 'Confirm Password', :placeholder => 'Password Confirmation' %>
                <%= f.association :bankinst, :collection => Bankinst.order(:FinancialInstitutionName), :required => true, :autofocus => true, :label => 'Pick an Institution', :label_method=>:FinancialInstitutionName, :id => 'user_bankinst_name'  %>
                <%= f.button :submit, "Sign Up  >>", class: 'btn btn-inverse' %>
            <% end %>

What am I doing wrong? Thanks for the help.

Upvotes: 3

Views: 4265

Answers (1)

DaveG
DaveG

Reputation: 1203

I figured it out.

I was missing ":input_html" for my class.

I changed my coffee file to:

jQuery ->
  $('.chzn-select').chosen()

I changed the class to chzn-select

<%= f.association :bankinst, :collection => Bankinst.order(:FinancialInstitutionName), :required => true, :autofocus => true, :label => 'Pick an Institution', :label_method=>:FinancialInstitutionName, :input_html => {:class => "chzn-select" }  %>

Upvotes: 5

Related Questions