Ajax select/multi select in Rails using Select2

account.rb

class Account < ActiveRecord::Base

  def self.search(name = nil)
    # search logic
  end
  
end

accounts_controller.rb

class AccountsController < ApplicationController

  def search
    # this returns a hash of search results
    records = RecordSearcher.call(Account.by_name, params)
    render json: records.to_json, callback: params[:callback]
  end
  
end

ajax_select.js.coffee

# bind to selectors
jQuery ->

  account_args =
    url: "/accounts/search.json"
    options:
      placeholder: "Search for an account"


  $(".account-select").ajaxSelect(account_args.url, account_args.options)

  $(".account-multi-select").ajaxSelect(
    account_args.url,
    placeholder: account_args.options
    multiple: true
  )

form.haml.erb

/ form input for user.stringy_account_ids, note data is set to pre-render exisiting results

= f.label :stringy_account_ids, "Accounts"
= f.hidden_field :stringy_account_ids, class: "account-multi-select", data: { records: f.object.accounts.select(["accounts.id","accounts.name"]) }

jquery_ajax_select.js.coffee

# customize options to suit your needs and/or forgo creating a first class jquery function

jQuery.fn.ajaxSelect = (url, options) ->
  defaults =
    placeholder: "Search for a record"
    formatter: (record) ->
      record.name
    multiple: false
    allow_clear: true

  settings = $.extend(defaults, options)

  this.select2
    initSelection: (elm, callback) ->
      results = $(elm).data "records"
      callback(results)
    placeholder: settings.placeholder
    allowClear: settings.allow_clear
    minimumInputLength: 3
    multiple: settings.multiple
    ajax:
      url: url
      dataType: "jsonp"
      quietMillis: 100
      data: (term, page) ->
        query: term
        limit: 10
        page: page
      results: (data, page) ->
        more = (page * 10) < data.total

        results: data.records
        more: more
    formatResult: settings.formatter
    formatSelection: settings.formatter

record_searcher.rb

# a simple class to generate search results, you can provide a block if you have different data attributes

class RecordSearcher
  attr_reader :records

  def initialize(records, params = {})
    unless records.respond_to? :search
      raise ArgumentError, "records must repond to .search"
    end

    default_params = {
      query: nil,
      page: nil,
      limit: nil
    }

    params.reverse_merge!(default_params)

    @records = records.search(params[:query]).page(params[:page])
    .per(params[:limit])
  end

  def call(&block)
    {
      total: records.total_count,
      records: records.map do |record|
        if block_given?
          block.call(record)
        else
          { name: record.name, id: record.id }
        end
      end
    }
  end

  def self.call(records, params = {}, &block)
    new(records, params).call(&block)
  end

end

stringy_ids.rb

# invoking in a class will add methods stringy_whatever_ids, and stringy_whatever_ids=

module StringyAssociationIds

  def stringy_ids(association)
    define_method("stringy_#{association}_ids=") do |comma_seperated_ids|
      self.send("#{association}_ids=", comma_seperated_ids.to_s.split(","))
    end

    define_method("stringy_#{association}_ids") do
      send("#{association}_ids").join(",")
    end
  end

end

ActiveRecord::Base.extend(StringyAssociationIds)

user.rb

class User < ActiveRecord::Base
  has_many :accounts
  stringy_ids :account
end

This is great, thanks for posting. I haven't had any luck attaching this to a form field in a form without an object. I have a search form_tag which sends a get request without an object, so . I was using select2 without ajax successfully by calling plain .select2 on this input:
<%= select_tag(:location_id, options_from_collection_for_select(@Locations, :id, :name, @location_ids), :class => "location_multi", :multiple => true)%>
Any idea how one would apply your logic to a hidden_field_tag to get it to submit multiple values correctly?

In case anyone else running into similar issues comes across this page, I've pasted below how you would alter @smoil's approach if multiple: false.
form:

<%= f.label :location_id, "Location" %> <%= f.hidden_field :location_id, class: 'select2-ajax-location', data: {locationid: f.object.location && f.object.location_id, locationname: f.object.location && f.object.location.name} %>

javascript: $(".select2-ajax-location").select2({ initSelection: function (elm, callback){ callback({"id":elm.data("locationid"), "name":elm.data("locationname")}); }, placeholder: "Start typing..", minimumInputLength: 2, ajax: { url: "/locations.json", dataType: 'json', quietMillis: 200, data: function (term, page) { return { q: term, page_limit: 10, page: page, }; }, results: function (data, page) { var more = (page \* 10) < data.total; // whether or not there are more results available return {results: data.locations, more: more}; } }, formatResult: function(location) { var markup = ""; markup += "

" + location.name + " "; markup += "

"; return markup; }, formatSelection: function(location) { return location.name; }, dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller });

Can you make a tutorial on it because it is not self-explanatory