Populate initial value on select2 ajax rails

Question

Im struggling to get this to work

I have a rails form that looks like this

%tr
  %td
    = f.label :company
  %td
    = f.hidden_field :companyid, class: 'select2 ajax', data: { source: companies_path }

inside my coffee js

  $(document).ready ->
   $(".select2").each (i, e) ->
    select = $(e)
    options = {}
    if select.hasClass("ajax")
      options.ajax =
        url: select.data("source")
        dataType: "json"
        data: (term, page) ->
          q: term
          page: page
          per: 10
        results: (data, page) ->
          results: data
      options.placeholder = "Select a value"
      options.dropdownAutoWidth = "true"
    select.select2 options
    return

The searching works fine, the storing of the data also, but when I reopen the page i.e. edit the saved record I get a blank select2 object with no default value loaded into the select box.

It isnt picking up the existing value from the saved record and doesnt display it. I can search no problem - thats all ok, its just not working.

Now I have played with InitSelection and trying to set "val" but its just not working.

What is the correct way to load the value stored from the record into the select2 box?

Thanks

SOLUTION FROM emaillenin SEE BELOW

$(document).ready ->
 $(".select2").each (i, e) ->
  select = $(e)
  options = {}
  if select.hasClass("ajax")
    options.ajax =
      url: select.data("source")
      dataType: "json"
      data: (term, page) ->
        q: term
        page: page
        per: 10
      results: (data, page) ->
        results: data
    options.placeholder = "Select a value"
    options.dropdownAutoWidth = "true"
    options.initSelection = (element, callback) ->
      data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
      callback data
  select.select2 options
  return

Answer 1

To set the initial value, set the value directly on the hidden field while the page loads.

%tr
  %td
    = f.label :company
  %td
    = f.hidden_field :companyid, value: "#{@company.id}||#{@company.name}", class: 'select2 ajax', data: { source: companies_path }

And then in the javascript, use this value and set the right dropdown value:

initSelection: (element, callback) ->
      data = []
      $(element.val().split(",")).each ->
        data.push
          id: this.split('||')[0]
          text: this.split('||')[1]
      $(element).val('')
      callback data

Here, I have kept the ID and value split by || and each ID/value pair split by comma. Mine is a multiple select dropdown. You can modify this for single select dropdown like below:

initSelection: (element, callback) ->
      data = {}
      data.id = $(element).val().split('||')[0]
      data.text: $(element).val().split('||')[1]
      $(element).val('')
      callback data

The key thing to note here is that, you need to call callback method with the data object that you want to set it to.