Git Product home page Git Product logo

chosen-rails's Introduction

Chosen for rails asset pipeline

Chosen is a library for making long, unwieldy select boxes more user friendly.

The chosen-rails gem integrates the Chosen with the Rails asset pipeline.

Usage

Install chosen-rails gem

Include chosen-rails in Gemefile

gem 'chosen-rails'

Then run bundle install

Include chosen javascript assets

Add to your app/assets/javascripts/application.js if use with jQuery

//= require chosen-jquery

Or with Prototype

//= require chosen-prototype

Include chosen stylesheet assets

Add to your app/assets/stylesheets/application.css

*= require chosen

Enable chosen javascript by specific css class

Add to one coffee script file, like scaffold.js.coffee

$ ->
  # enable chosen js
  $('.chosen-select').chosen
    allow_single_deselect: true
    no_results_text: 'No results matched'
    width: '200px'

Notice: width option is required since Chosen 0.9.15.

And this file must be included in application.js

//= require chosen-jquery
//= require scaffold

Also add the class to your form field

<%= f.select :author,
  User.all.map { |u| [u.name, u.id] },
               { include_blank: true },
               { class: 'chosen-select' }
%>

If you use simple form as form builder

<%= f.association :author, 
                  collection: User.all,
                  include_blank: true,
                  input_html: { class: 'chosen-select' }
%>

Deployment

Since version 0.13.0, non-digested assets of chosen-rails will simply be copied from digested assets.

RSpec helpers

chosen-rails provides RSpec feature helper methods that allow users to select or unselect options from both single and multiple chosen elements. Add the following to your spec/rails_helper.rb (or spec/spec_helper.rb):

require 'chosen-rails/rspec'

This automatically configures RSpec by adding:

RSpec.configure do |config|
  config.include Chosen::Rspec::FeatureHelpers, type: :feature
end

Configuration includes two additional methods for all type: :feature specs:

chosen_select(value, options = {})
chosen_unselect(value, options = {})

Both methods require from: '...' inside the options hash that is either a CSS selector or a field's label (requires the for attribute on the label!).

Example usage

To handle a single select:

chosen_select('Leo Tolstoy', from: 'Author')
chosen_unselect('Leo Tolstoy', from: '#author')
chosen_select('Fyodor Dostoyevsky', from: '#author')

To handle a multiple select:

chosen_select('Leo Tolstoy', 'Fyodor Dostoyevsky', 'Anton Chekhov', from: 'Authors')
# or, by single value:
chosen_select('Leo Tolstoy', from: '#authors')

chosen_unselect('Fyodor Dostoyevsky', ' Anton Chekhov', from: 'Authors')
# or, by single value:
chosen_unselect('Leo Tolstoy', from: '#authors')

Gem maintenance

Maintain chosen-rails gem with Rake commands.

Update origin chosen source files.

rake update-chosen

Publish gem.

rake release

License

use MIT license.

chosen-rails's People

Contributors

abookyun avatar asanghi avatar azfire avatar bai avatar caarlos0 avatar dgilperez avatar mrbanzai avatar nerian avatar rxgx avatar shreyas123 avatar singpolyma avatar slothbear avatar tsechingho avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.