TwitterBootstrapCombo

Advanced combo-box using Twitter-Bootstrap

Installation

Add this line to your application's Gemfile:

gem 'twitter_bootstrap_combo'

And then execute:

$ bundle

Or install it yourself as:

$ gem install twitter_bootstrap_combo

Usage

Add this line to app/assets/javascripts/application.js:

//= twitter_bootstrap_combo

Then in your views, use:

<%= combo_box(:calendar, :parent_id, Calendar.all.collect { |c| [ (content_tag(:i, "", :class => "fa fa-angle-right fa-fw") * c.level + c.name).html_safe, c.id ] }, :include_blank => true) %>

to produce:

<input id="calendar_parent_id" name="calendar[parent_id]" type="hidden" value="6" /><div class="btn-group"><a href="#" class="btn dropdown-toggle" data-toggle="dropdown"><span class="combo_box_text">Child 1</span> <i class="fa fa-caret-down"></i></a><ul class="dropdown-menu" data-for="calendar_parent_id"><li class=""><a href="#" class="combo_box_item">(None)</a></li><li class=""><a href="#" class="combo_box_item" data-value="5">Root</a></li><li class="active"><a href="#" class="combo_box_item" data-value="6"><i class="fa fa-angle-right fa-fw"></i>Child 1</a></li><li class=""><a href="#" class="combo_box_item" data-value="8"><i class="fa fa-angle-right fa-fw"></i><i class="fa fa-angle-right fa-fw"></i>SubChild 1</a></li><li class=""><a href="#" class="combo_box_item" data-value="9"><i class="fa fa-angle-right fa-fw"></i><i class="fa fa-angle-right fa-fw"></i>SubChild 2</a></li><li class=""><a href="#" class="combo_box_item" data-value="7"><i class="fa fa-angle-right fa-fw"></i>Child 2</a></li></ul></div>

which render like this:

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request