Created
March 23, 2016 08:40
-
-
Save tyaslab/5defba6bb0ee7e0e21f9 to your computer and use it in GitHub Desktop.
Select2 Snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<select class="js-data-example-ajax"> | |
<option value="3620194" selected="selected">select2/select2</option> | |
</select> | |
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>"; | |
return markup; | |
} | |
function formatRepoSelection (repo) { | |
return repo.full_name || repo.text; | |
} | |
$(".js-data-example-ajax").select2({ | |
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 | |
}, | |
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work | |
minimumInputLength: 1, | |
templateResult: formatRepo, // omitted for brevity, see the source of this page | |
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(".js-example-tokenizer").select2({ | |
tags: true, | |
tokenSeparators: [',', ' '] | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment