title: select2, x-editable and bootstrap-table compatibility
body: <p>I use bootstrap 3 and <a href="http://bootstrap-table.wenzhixin.net.cn/" rel="nofollow">bootstrap-table</a>. I would like to use 'tag' mode like in <a href="http://jsfiddle.net/N6bQE/394/" rel="nofollow">this</a> example.</p>
  
  <p>When I use <strong>select2</strong> version 3.4.4 (like in x-editable example) my <a href="http://jsfiddle.net/3L7vgcx0/90/" rel="nofollow">code</a> works, but when I want to use the latest version 4.0.0 my <a href="http://jsfiddle.net/3L7vgcx0/91/" rel="nofollow">code</a> doesn't work. </p>
  
  <p>I get error message:</p>
  
  <p><em>Uncaught Error: No select2/compat/inputData</em></p>
  
  <p>I tried to replace select2.js by select2.full.js, but in <a href="http://jsfiddle.net/3L7vgcx0/92/" rel="nofollow">this</a> case editable box is empty.</p>
  
  <p>How can I make editable cells compatible with the latest version of select2? </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>    &lt;table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th data-field="name" data-editable="true"&gt;Name&lt;/th&gt;
          &lt;th data-field="stargazers_count" data-editable="true"&gt;Stars&lt;/th&gt;
          &lt;th data-field="forks_count" data-editable="true"&gt;Forks&lt;/th&gt;
          &lt;th data-field="description" data-editable="true"&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;ala&lt;/td&gt;&lt;td&gt;ele&lt;/td&gt;&lt;td class="tag" data-toggle="manual" data-type="select2" data-value="na, an, sd"&gt;na,an,sd&lt;/td&gt;&lt;td&gt;asd&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;ala&lt;/td&gt;&lt;td&gt;ele&lt;/td&gt;&lt;td class="tag"&gt;na,an,sd&lt;/td&gt;&lt;td&gt;asd&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;ala&lt;/td&gt;&lt;td&gt;ele&lt;/td&gt;&lt;td class="tag"&gt;na,an,sd&lt;/td&gt;&lt;td&gt;asd&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>$.fn.editable.defaults.mode = 'inline';
  
  $('table').bootstrapTable({
      editable: true
  });
  
  console.log($('.tag'));
  
  var tagCells = $('.tag');
  $(tagCells).each(function() {
      var tags = $( this ).children(":first").html().replace(/ /g,'').split(",");
      console.log(tags);
      $(this).editable({
          select2: {
              tags: tags,
              tokenSeparators: [",", " "]
          }
      });
  });
  
  $('.tag').click(function(e) {
      e.stopPropagation();
      e.preventDefault();
      $(this).editable('toggle');
  });
  </code></pre>