--- layout: default title: Examples - Select2 slug: examples --- <script type="text/javascript" src="vendor/js/placeholders.jquery.min.js"></script> <script type="text/javascript" src="dist/js/i18n/es.js"></script> <style type="text/css"> .img-flag { height: 15px; width: 18px; } </style> <section class="jumbotron"> <div class="container"> <h1> Examples </h1> </div> </section> <div class="container s2-docs-container"> <div class="row"> <div class="col-md-9" role="main"> {% include examples/basics.html %} {% include examples/placeholders.html %} {% include examples/data.html %} {% include examples/disabled-mode.html %} {% include examples/disabled-results.html %} {% include examples/multiple-max.html %} {% include examples/hide-search.html %} {% include examples/programmatic-control.html %} {% include examples/tags.html %} {% include examples/tokenizer.html %} {% include examples/matcher.html %} {% include examples/localization-rtl-diacritics.html %} {% include examples/themes-templating-responsive-design.html %} </div> <div class="col-md-3" role="complementary"> {% include nav/examples.html %} </div> </div> </div> {% include js-source-states.html %} <script type="text/javascript"> var $states = $(".js-source-states"); var statesOptions = $states.html(); $states.remove(); $(".js-states").append(statesOptions); $("[data-fill-from]").each(function () { var $this = $(this); var codeContainer = $this.data("fill-from"); var $container = $(codeContainer); var code = $.trim($container.html()); $this.text(code); $this.addClass("prettyprint linenums"); }); prettyPrint(); $.fn.select2.amd.require([ "select2/core", "select2/utils", "select2/compat/matcher" ], function (Select2, Utils, oldMatcher) { var $basicSingle = $(".js-example-basic-single"); var $basicMultiple = $(".js-example-basic-multiple"); var $limitMultiple = $(".js-example-basic-multiple-limit"); var $dataArray = $(".js-example-data-array"); var $dataArraySelected = $(".js-example-data-array-selected"); var data = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' } ]; var $ajax = $(".js-example-data-ajax"); var $disabledResults = $(".js-example-disabled-results"); var $tags = $(".js-example-tags"); var $matcherStart = $('.js-example-matcher-start'); var $diacritics = $(".js-example-diacritics"); var $language = $(".js-example-language"); $.fn.select2.defaults.set("width", "100%"); $basicSingle.select2(); $basicMultiple.select2(); $limitMultiple.select2({ maximumSelectionLength: 2 }); function formatState (state) { if (!state.id) { return state.text; } var $state = $( '<span>' + '<img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>' ); return $state; }; $(".js-example-templating").select2({ templateResult: formatState, templateSelection: formatState }); $dataArray.select2({ data: data }); $dataArraySelected.select2({ data: data }); 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; } $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; }, minimumInputLength: 1, templateResult: formatRepo, templateSelection: formatRepoSelection }); $(".js-example-disabled").select2(); $(".js-example-disabled-multi").select2(); $(".js-example-responsive").select2({ width: 'resolve' // need to override the changed default }); $disabledResults.select2(); $(".js-example-programmatic").select2(); $(".js-example-programmatic-multi").select2(); $eventSelect.select2(); $tags.select2({ tags: ['red', 'blue', 'green'] }); $(".js-example-tokenizer").select2({ tags: true, tokenSeparators: [',', ' '] }); function matchStart (term, text) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { return true; } return false; } $matcherStart.select2({ matcher: oldMatcher(matchStart) }); $(".js-example-basic-hide-search").select2({ minimumResultsForSearch: Infinity }); $diacritics.select2(); $language.select2({ language: "es" }); $(".js-example-theme-single").select2({ theme: "classic" }); $(".js-example-theme-multiple").select2({ theme: "classic" }); $(".js-example-rtl").select2(); }); </script>