cinatic/gist:b8fe352ad4e3ff05f71f

## gistfile1.html
<!--http://jsfiddle.net/sgxKJ/-->
<!doctype html>
<html>
<head>
        <meta charset="utf-8">

<title>
  Examples - Select2
</title>

<link href="https://select2.github.io/vendor/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<!--<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/select2.min.css" />-->

<link href="select2.css" type="text/css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="select2.js"></script>
<script type="text/javascript" src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>

<style type="text/css">
  body { font-size: 16px; }
  footer { background-color: #eee; margin-top: 1em; padding: 1em; text-align: center; }
  .navbar-inverse .navbar-brand { color: #fff; }
</style>

    </head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

<div class="ui-widget">
  <label for="demo">Projects: </label>
  <input id="demo">
</div>

<div class="ui-widget">
  <label for="test3">Projects: </label>
  <input id="test3">
</div>
 <script>
 var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

 $('#tags').select2({
    multiple: true,
    width: "600px",
    ajax: {
      url: "http://jobsuite24.de/DE/BaseData/LoadCityAutoCompletion",
      cache: "true",
	  dataType: 'json',
	  delay: 250,
	  data: function (params) {
		var queryParameters = {
		  searchTerm: params.term
		}

		return queryParameters;
	  },

	  processResults: function (data) {
	    $.each(data, function(index, value){
			value.id = value.Value;
		});

		console.log(data);
		return {
		  results: data
		};
	  }
    },

	templateResult: function (item) {
	  item.id = item.Value;
      if (item.loading) return item.text;

      var markup = '<div class="clearfix">' +
        '<div clas="col-sm-10">' +
          '<div class="clearfix">' +
            '<div class="col-sm-6">' + item.Label + '</div>' +
            '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + item.Value + '</div>' +
          '</div>';

      markup += '</div></div>';

      return markup;
    },
	templateSelection: function (item) {
		console.log(item);
      return item.Label || item.text;
    },
	minimumInputLength: 1
});


 $('#test3').select2(
 { data: data,
 multiple: true,
 });

  $('#demo').select2({
	width: "600px",
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    minimumInputLength: 1,
    templateResult: function (repo) {
      if (repo.loading) return repo.text;

      var markup = '<div class="clearfix">' +
        '<div class="col-sm-1">' +
          '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
        '</div>' +
        '<div clas="col-sm-10">' +
          '<div class="clearfix">' +
            '<div class="col-sm-6">' + repo.full_name + '</div>' +
            '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
            '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
          '</div>';

      if (repo.description) {
         markup += '<div>' + repo.description + '</div>';
      }

      markup += '</div></div>';

      return markup;
    },
    templateSelection: function (repo) {
      return repo.full_name || repo.text;
    }
  });
 </script>

</body>
</html>
	<!--http://jsfiddle.net/sgxKJ/-->
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>
	Examples - Select2
	</title>

	<link href="https://select2.github.io/vendor/css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<!--<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/select2.min.css" />-->

	<link href="select2.css" type="text/css" rel="stylesheet">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
	<script src="select2.js"></script>
	<script type="text/javascript" src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>

	<style type="text/css">
	body { font-size: 16px; }
	footer { background-color: #eee; margin-top: 1em; padding: 1em; text-align: center; }
	.navbar-inverse .navbar-brand { color: #fff; }
	</style>

	</head>
	<body>

	<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags">
	</div>

	<div class="ui-widget">
	<label for="demo">Projects: </label>
	<input id="demo">
	</div>

	<div class="ui-widget">
	<label for="test3">Projects: </label>
	<input id="test3">
	</div>
	<script>
	var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

	$('#tags').select2({
	multiple: true,
	width: "600px",
	ajax: {
	url: "http://jobsuite24.de/DE/BaseData/LoadCityAutoCompletion",
	cache: "true",
	dataType: 'json',
	delay: 250,
	data: function (params) {
	var queryParameters = {
	searchTerm: params.term
	}

	return queryParameters;
	},

	processResults: function (data) {
	$.each(data, function(index, value){
	value.id = value.Value;
	});

	console.log(data);
	return {
	results: data
	};
	}
	},

	templateResult: function (item) {
	item.id = item.Value;
	if (item.loading) return item.text;

	var markup = '<div class="clearfix">' +
	'<div clas="col-sm-10">' +
	'<div class="clearfix">' +
	'<div class="col-sm-6">' + item.Label + '</div>' +
	'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + item.Value + '</div>' +
	'</div>';

	markup += '</div></div>';

	return markup;
	},
	templateSelection: function (item) {
	console.log(item);
	return item.Label \|\| item.text;
	},
	minimumInputLength: 1
	});


	$('#test3').select2(
	{ data: data,
	multiple: true,
	});

	$('#demo').select2({
	width: "600px",
	ajax: {
	url: "https://api.github.com/search/repositories",
	dataType: 'json',
	delay: 250,
	data: function (params) {
	return {
	q: params.term, // search term
	page: params.page
	};
	},
	processResults: function (data, params) {
	// parse the results into the format expected by Select2
	// since we are using custom formatting functions we do not need to
	// alter the remote JSON data, except to indicate that infinite
	// scrolling can be used
	params.page = params.page \|\| 1;

	return {
	results: data.items,
	pagination: {
	more: (params.page * 30) < data.total_count
	}
	};
	},
	cache: true
	},
	minimumInputLength: 1,
	templateResult: function (repo) {
	if (repo.loading) return repo.text;

	var markup = '<div class="clearfix">' +
	'<div class="col-sm-1">' +
	'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
	'</div>' +
	'<div clas="col-sm-10">' +
	'<div class="clearfix">' +
	'<div class="col-sm-6">' + repo.full_name + '</div>' +
	'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
	'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
	'</div>';

	if (repo.description) {
	markup += '<div>' + repo.description + '</div>';
	}

	markup += '</div></div>';

	return markup;
	},
	templateSelection: function (repo) {
	return repo.full_name \|\| repo.text;
	}
	});
	</script>

	</body>
	</html>