Use Select2 and X-Editable together with latest versions

Question

All the examples online that I see show how to use X-Editable with Select2 library are using older versions of select2.

X-Editable - http://vitalets.github.io/x-editable/ with
Select2 - https://select2.github.io/ for weeks now without much luck.

Has anyone got these 2 libraries recently with versions released in the past year even to work together?

Answer 1

I also run into this problem recently and come up a cheat. It uses the standard 'select' and turn it into a select2 on show:

$('#stages').editable({
  source: [ {value: 1, text:'ahaa'}, {value: 2, text: 'ohooo'} ]
}).on('shown', function(e, editable){
  editable.input.$input.select2({
    width: 250,
    minimumResultsForSearch: Infinity
  });
  editable.input.$input.select2('val', editable.input.$input.val());
});

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
		<link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<a href="#"
   id="stages"
   data-type="select"
   data-placement="right"
   class="editable editable-click"
   data-value="1"
   data-title="Select something"></a>