---

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>

