title: Set initial value of select2 ajax with knockout
body: <p>I have a problem to set initial value of select2 ajax control. I'm using CI and knockout in this case. My code will add one row to table body when pressed and i use select2 ajax in table cell.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;tbody data-bind="foreach: rows"&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input name="id_item[]" class="form-control big-drop" type="hidden" data-bind="value: id_item,select2: { minimumInputLength: 1, query: $root.list_item,formatResult: $root.itemFormatResult,formatSelection: $root.itemFormatSelection, allowClear: true}"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input placeholder="qty" name="qty[]" class="form-control number text-right" data-bind="value: qty,number: qty, numberOptions: {value: true, number_of_comma: 0}, valueUpdate: 'afterkeydown'"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input placeholder="price" name="price[]" class="form-control number text-right" data-bind="value: price,number: price, numberOptions: {value: true, number_of_comma: 2}, valueUpdate: 'afterkeydown', formatNoMatches: no_match_format"&gt;&lt;/td&gt;  
      &lt;td&gt;&lt;button data-bind="click: $root.removeRow" class="btn btn-danger"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>My KO model:</p>
  
  <pre><code>function Row(id_item, qty, price) {
      var self = this;
      self.id_item = ko.observable(id_item);
      self.qty = ko.observable(qty);
      self.price = ko.observable(price);
  
      ko.computed(function () {
          var item = self.id_item();
  
          get_satuan(item).done(function (data) {
              if (!isNaN(data.price)){
                  self.harga(format_number(data.price, ''));
              }
          });
      });
  }
  
  var RowModel = function(rows) {
      var self = this;
  
      var default_array = ko.observableArray();
      if (detail.length &gt; 0){
          $.each(detail, function(key, value){
              default_array.push(new Row(value.id_item, value.qty, value.price));
          });
      }
  
      self.rows = default_array;
      self.addRow = function() {
          self.rows.push(new Row('TUT',"","1"));
      };
  
      self.removeRow = function(row) { self.rows.remove(row) }
  
      self.list_item = function (query) {
          $.ajax({
              url: 'link to get json',
              type: 'POST',
              dataType: 'json',
              data: {q: query.term},
              success: function (data) {
                  query.callback({
                      results: data
                  });
              }
          });
      };
      self.itemFormatResult = function(item) {
          var markup = "&lt;table class='movie-result'&gt;&lt;tr&gt;&lt;td&gt;&lt;div class='movie-title'&gt;";
          markup += "&lt;b&gt;" + item.id + "&lt;/b&gt;";
          markup += "&lt;br&gt;" + item.item_name;
          markup += "&lt;br&gt;" + item.unit;
          markup += "&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
          return markup;
      }
      self.itemFormatSelection = function (item) {
          return item.item_name;
      };
  };
  
  ko.applyBindings(new RowModel());
  </code></pre>
  
  <p>Everything works well:
  1. adding new row
  2. selecting item using select2 works fine
  3. after selecting item, the price will change based on item selection, works fine</p>
  
  <p>The problem is in this code:</p>
  
  <pre><code>self.addRow = function() {
          self.rows.push(new Row('TUT',"","1"));
  };
  </code></pre>
  
  <p>After setting the value of select2, select2 not displaying the item_name based on <strong>itemFormatSelection</strong>.
  Please help me, thanks a lot. Sorry for my bad english</p>