<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dist/assets/node_modules/select2/docs/examples.html</h2><form method='post'><textarea name='content' class='file-edit'>---
layout: default
title: Examples - Select2
slug: examples
---

&lt;script type=&quot;text/javascript&quot; src=&quot;vendor/js/placeholders.jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;dist/js/i18n/es.js&quot;&gt;&lt;/script&gt;

&lt;style type=&quot;text/css&quot;&gt;
  .img-flag {
    height: 15px;
    width: 18px;
  }
&lt;/style&gt;

&lt;section class=&quot;jumbotron&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;h1&gt;
      Examples
    &lt;/h1&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;div class=&quot;container s2-docs-container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-9&quot; role=&quot;main&quot;&gt;

      {% 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 %}

    &lt;/div&gt;
    &lt;div class=&quot;col-md-3&quot; role=&quot;complementary&quot;&gt;

      {% include nav/examples.html %}

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

{% include js-source-states.html %}

&lt;script type=&quot;text/javascript&quot;&gt;
  var $states = $(&quot;.js-source-states&quot;);
  var statesOptions = $states.html();
  $states.remove();

  $(&quot;.js-states&quot;).append(statesOptions);

  $(&quot;[data-fill-from]&quot;).each(function () {
    var $this = $(this);

    var codeContainer = $this.data(&quot;fill-from&quot;);
    var $container = $(codeContainer);

    var code = $.trim($container.html());

    $this.text(code);
    $this.addClass(&quot;prettyprint linenums&quot;);
  });

  prettyPrint();

  $.fn.select2.amd.require([
    &quot;select2/core&quot;,
    &quot;select2/utils&quot;,
    &quot;select2/compat/matcher&quot;
  ], function (Select2, Utils, oldMatcher) {
    var $basicSingle = $(&quot;.js-example-basic-single&quot;);
    var $basicMultiple = $(&quot;.js-example-basic-multiple&quot;);
    var $limitMultiple = $(&quot;.js-example-basic-multiple-limit&quot;);

    var $dataArray = $(&quot;.js-example-data-array&quot;);
    var $dataArraySelected = $(&quot;.js-example-data-array-selected&quot;);

    var data = [
      { id: 0, text: 'enhancement' },
      { id: 1, text: 'bug' },
      { id: 2, text: 'duplicate' },
      { id: 3, text: 'invalid' },
      { id: 4, text: 'wontfix' }
    ];

    var $ajax = $(&quot;.js-example-data-ajax&quot;);

    var $disabledResults = $(&quot;.js-example-disabled-results&quot;);

    var $tags = $(&quot;.js-example-tags&quot;);

    var $matcherStart = $('.js-example-matcher-start');

    var $diacritics = $(&quot;.js-example-diacritics&quot;);
    var $language = $(&quot;.js-example-language&quot;);

    $.fn.select2.defaults.set(&quot;width&quot;, &quot;100%&quot;);

    $basicSingle.select2();
    $basicMultiple.select2();
    $limitMultiple.select2({
      maximumSelectionLength: 2
    });

    function formatState (state) {
      if (!state.id) {
        return state.text;
      }
      var $state = $(
        '&lt;span&gt;' +
          '&lt;img src=&quot;vendor/images/flags/' +
            state.element.value.toLowerCase() +
          '.png&quot; class=&quot;img-flag&quot; /&gt; ' +
          state.text +
        '&lt;/span&gt;'
      );
      return $state;
    };

    $(&quot;.js-example-templating&quot;).select2({
      templateResult: formatState,
      templateSelection: formatState
    });

    $dataArray.select2({
      data: data
    });

    $dataArraySelected.select2({
      data: data
    });

    function formatRepo (repo) {
      if (repo.loading) return repo.text;

      var markup = &quot;&lt;div class='select2-result-repository clearfix'&gt;&quot; +
        &quot;&lt;div class='select2-result-repository__avatar'&gt;&lt;img src='&quot; + repo.owner.avatar_url + &quot;' /&gt;&lt;/div&gt;&quot; +
        &quot;&lt;div class='select2-result-repository__meta'&gt;&quot; +
          &quot;&lt;div class='select2-result-repository__title'&gt;&quot; + repo.full_name + &quot;&lt;/div&gt;&quot;;

      if (repo.description) {
        markup += &quot;&lt;div class='select2-result-repository__description'&gt;&quot; + repo.description + &quot;&lt;/div&gt;&quot;;
      }

      markup += &quot;&lt;div class='select2-result-repository__statistics'&gt;&quot; +
        &quot;&lt;div class='select2-result-repository__forks'&gt;&lt;i class='fa fa-flash'&gt;&lt;/i&gt; &quot; + repo.forks_count + &quot; Forks&lt;/div&gt;&quot; +
        &quot;&lt;div class='select2-result-repository__stargazers'&gt;&lt;i class='fa fa-star'&gt;&lt;/i&gt; &quot; + repo.stargazers_count + &quot; Stars&lt;/div&gt;&quot; +
        &quot;&lt;div class='select2-result-repository__watchers'&gt;&lt;i class='fa fa-eye'&gt;&lt;/i&gt; &quot; + repo.watchers_count + &quot; Watchers&lt;/div&gt;&quot; +
      &quot;&lt;/div&gt;&quot; +
      &quot;&lt;/div&gt;&lt;/div&gt;&quot;;

      return markup;
    }

    function formatRepoSelection (repo) {
      return repo.full_name || repo.text;
    }

    $ajax.select2({
      ajax: {
        url: &quot;https://api.github.com/search/repositories&quot;,
        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) &lt; data.total_count
            }
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 1,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
    });

    $(&quot;.js-example-disabled&quot;).select2();
    $(&quot;.js-example-disabled-multi&quot;).select2();

    $(&quot;.js-example-responsive&quot;).select2({
        width: 'resolve' // need to override the changed default
    });

    $disabledResults.select2();

    $(&quot;.js-example-programmatic&quot;).select2();
    $(&quot;.js-example-programmatic-multi&quot;).select2();

    $eventSelect.select2();

    $tags.select2({
      tags: ['red', 'blue', 'green']
    });

    $(&quot;.js-example-tokenizer&quot;).select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });

    function matchStart (term, text) {
      if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
        return true;
      }

      return false;
    }

    $matcherStart.select2({
      matcher: oldMatcher(matchStart)
    });

    $(&quot;.js-example-basic-hide-search&quot;).select2({
      minimumResultsForSearch: Infinity
    });

    $diacritics.select2();

    $language.select2({
      language: &quot;es&quot;
    });

    $(&quot;.js-example-theme-single&quot;).select2({
      theme: &quot;classic&quot;
    });

    $(&quot;.js-example-theme-multiple&quot;).select2({
      theme: &quot;classic&quot;
    });

    $(&quot;.js-example-rtl&quot;).select2();
  });
&lt;/script&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdist%2Fassets%2Fnode_modules%2Fselect2%2Fdocs'>Back to Directory</a>