$(".js-data-example-ajax").select2({ language: { noResults: function() { return "No results found, <a id='newData' href='#' class='btn btn-xs btn-success'>Use the above text anyways</a>"; } }, ajax: { url: "https://api.github.com/search/repositories", dataType: 'json', delay: 250, type:'GET', data: function(params) { return { q: params.term, // search term page: params.page }; }, processResults: function(data, params) { params.page = params.page || 1; return { results: data.items, pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, escapeMarkup: function(markup) { return markup; }, minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection, createTag: function(params) { alert('create tag'); return { id: params.term, text: params.term, newOption: true } } }); function formatRepo(repo) { if (repo.loading) return repo.text; var markup = "<div class='select2-result-repository clearfix'>" + "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + "<div class='select2-result-repository__meta'>" + "<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; if (repo.description) { markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; } markup += "<div class='select2-result-repository__statistics'>" + "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" + "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" + "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" + "</div>" + "</div></div>"; if (repo.newOption) { alert('adasdasddads'); } return markup; } function formatRepoSelection(repo) { return repo.full_name || repo.text; }
<select class="js-data-example-ajax"> <option value="3620194" selected="selected">select2/select2</option> </select>
.select2-container { width: 100% !important; }