Sample Data

This can be found in the create_people migration.

Name Favorite Color
Brittney Yellow
Eric Black
Fred Tan
Jason Blue
Mike Red
Nick Orange
Paige Purple

Simple Example

Without Select2

With Select2

This is a vanilla select_tag using a rails generator. The code to initialize this is:

$(document).ready(function() {
  $('select#simple-example').select2();
});

Placeholder Example

$(document).ready(function() {
  $('select#placeholder-example').select2({
    placeholder: "Choose a person",
    allowClear: true
  });
});

When using the placeholder option with Rails, it is necessary to use the include_blank: true option to your select_tag options. The allowClear option will place a small X to the right which allows the selection to be cleared.

Template Example

Ruby/HTML

<select id="template-example">
  <% @people.each do |person| %>
    <option value="<%= person.id %>" data-favorite-color="<%= person.favorite_color %>"><%= person.name %></option>
  <% end %>
</select>

JavaScript

$(document).ready(function() {
  function formatExample(person) {
    var originalOption = $(person.element);
    return "   " + person.text;
  }
  $('select#template-example').select2({
    formatResult: formatExample,
    formatSelection: formatExample,
    escapeMarkup: function(m) { return m; }
  });
});

In this example, we're not using any Rails helpers to create a select tag. We manually iterate through the @people collection and write out our specific option tags. We do this so that we can pass the data-favorite-color attribute in to the markup.

In our JavaScript for this example, we use formatExample function to add a small span to our list containing the person's favorite color. The span uses a background color and space characters to display. We use a cringe-worthy inline style to make it look good (hey, at least it works!). Finally, we call the select2 function and pass it the formatExample function to format our data. Select2 takes care of the rest.

Ajax Example

Rails

class PeopleController < ApplicationController
  respond_to :html, :json

  def index
    @people = Person.order('name asc').all
    respond_with @people
  end
end

HTML

<input type="hidden" id="ajax-example" />

JavaScript

$(document).ready(function() {
  $('#ajax-example').select2({
    ajax: {
      url: "/people.json",
      dataType: "json",
      results: function(data, page) {
        return { 
          results: $.map( data, function(person, i) { 
            return { id: person.id, text: person.name } 
          } )
        }
      }
    }
  });
});

In this example, we are using Rails as the backend to return json to the select2 call. In our HTML, we are creating a hidden input with the id of ajax-example. We then call the select2 function on that element.

The biggest difference between this example and the others is that we are passing in the ajax option to select2 this time. We tell select2 the url we want to fetch with the url key. We just use a Rails helper to call the people path and pass in the json format. We then use this in the dataType key.

The next part, on line 8, is the results key. This is where we perform a little bit of manipulation on the data. Select2 expects that the results object will have an id and text key for each result. We go through our data response, which we get from our Rails controller, and create this object for select2 using the jQuery map function.

Our Rails controller responds with json of the people collection. We could use any Rails controller here as long as it returns json.