- ###### FILES

- Two new item submitted Marketing Manager
  17kb
- 52 Doc file Generator FontEnd Developer
  550kb
- 25 Xls File Uploaded Digital Marketing Manager
  20kb
- Anna Strong Web Designer
  37kb

- ###### MEMBERS

- John Doe UI designer
- Michal Clark FontEnd Developer
- Milena Gibson Digital Marketing
- Anna Strong Web Designer

- ###### PAGES

- error_outline No results found.

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

#### Select2

- View
- Html
- Js

###### Basic Select2

Use `.select2` class for basic select2 control.

###### Single Select with Label

Use `optgroup` attribute for basic select2 with Label control.

###### Select With Icon

Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.

###### Template support

Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the `classic` theme, which matches the old look of Select2.

    // Basic Select2
    <div class="input-field">
      <select class="select2 browser-default">
        <option value="square">Square</option>
        <option value="rectangle">Rectangle</option>
        <option value="rombo">Rombo</option>
        <option value="romboid">Romboid</option>
        <option value="trapeze">Trapeze</option>
        <option value="traible">Triangle</option>
        <option value="polygon">Polygon</option>
      </select>
    </div>
    // Select2 With Icon
    <div class="input-field">
      <select data-placeholder="Select a state..." class="select2-icons browser-default" id="select2-icons">
        <option value="Ac unit" data-icon="ac_unit" selected>Ac unit</option>
        <option value="widgets" data-icon="widgets">Widgets</option>
        <option value="weekend" data-icon="weekend">Weekend</option>
        <option value="web" data-icon="web">web</option>
        <option value="warning" data-icon="warning">Warning</option>
        <option value="apps" data-icon="apps">Apps</option>
        <option value="airplay" data-icon="airplay">Airplay</option>
        <option value="accessibility" data-icon="accessibility">Accessibility</option>
        <option value="accessible" data-icon="accessible">Accessible</option>
      </select>
    </div>
    //selects witn label
    <div class="input-field">
      <select class="select2 browser-default">
        <optgroup label="Figures">
          <option value="romboid">Romboid</option>
          <option value="trapeze">Trapeze</option>
          <option value="triangle">Triangle</option>
          <option value="polygon">Polygon</option>
        </optgroup>
        <optgroup label="Colors">
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
          <option value="purple">Purple</option>
        </optgroup>
      </select>
    </div>

    // Basic Select2 select
    $(".select2").select2({
        dropdownAutoWidth: true,
        width: '100%'
    });
    // Select With Icon
    $(".select2-icons").select2({
        dropdownAutoWidth: true,
        width: '100%',
        minimumResultsForSearch: Infinity,
        templateResult: iconFormat,
        templateSelection: iconFormat,
        escapeMarkup: function (es) { return es; }
    });

    // Format icon
    function iconFormat(icon) {
        var originalOption = icon.element;
        if (!icon.id) { return icon.text; }
        var $icon = "<i class='material-icons'>" + $(icon.element).data('icon') + "</i>" + icon.text;
        return $icon;
    }
    // Theme support
    $(".select2-theme").select2({
        dropdownAutoWidth: true,
        width: '100%',
        placeholder: "Classic Theme",
        theme: "classic"
    });

#### Multiple Select2

- View
- Html
- Js

###### Multiple Select with Label

Use `optgroup` attribute for multiple select box with Label control.

###### Maximum Select with Label

Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the `multiple` attribute with `maximumSelectionLength` in the select2 options.

###### Select With Icon

Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.

###### Multiple Select2

Use `.select2` class for basic select2 control. Use `multiple="multiple"` attribute for multiple select box.

    // Multiple Select with Label
    <div class="input-field">
      <select class="select2 browser-default" multiple="multiple">
        <optgroup label="Figures">
          <option value="romboid">Romboid</option>
          <option value="trapeze" selected>Trapeze</option>
          <option value="triangle">Triangle</option>
          <option value="polygon">Polygon</option>
        </optgroup>
        <optgroup label="Colors">
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue" selected>Blue</option>
          <option value="purple">Purple</option>
        </optgroup>
      </select>
    </div>
    //Multiple select with label
    <div class="input-field">
      <select class="max-length browser-default" multiple="multiple" id="max_length">
        <optgroup label="Figures">
          <option value="romboid">Romboid</option>
          <option value="trapeze" selected>Trapeze</option>
          <option value="triangle">Triangle</option>
          <option value="polygon">Polygon</option>
        </optgroup>
        <optgroup label="Colors">
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
          <option value="purple">Purple</option>
        </optgroup>
      </select>
    </div>
    // Mutliple select with icon
    <div class="input-field">
      <select data-placeholder="Select a state..." class="select2-icons browser-default"
        id="multiple-select2-icons" multiple="multiple">
        <option value="3d_rotation" data-icon="3d_rotation" selected>3d_rotation</option>
        <option value="access_alarm" data-icon="access_alarm">Access_alarm</option>
        <option value="account_circle" data-icon="account_circle">Account_circle</option>
        <option value="add_alarm" data-icon="add_alarm">Add_alarm</option>
        <option value="add_alert" data-icon="add_alert">Add_alert</option>
        <option value="airport_shuttle" data-icon="airport_shuttle">Airport_shuttle</option>
        <option value="announcement" data-icon="announcement">Announcement</option>
        <option value="archive" data-icon="archive">Archive</option>
        <option value="android" data-icon="android">Android</option>
        <option value="assessment" data-icon="assessment">Assessment</option>
        <option value="assignment" data-icon="assignment">Assignment</option>
        <option value="attach_file" data-icon="attach_file">Attach_file</option>
        <option value="attachment" data-icon="attachment">Attachment</option>
        <option value="audiotrack" data-icon="audiotrack">Audiotrack</option>
      </select>
    </div>
    //Multiple select2
    <div class="input-field">
        <select class="select2 browser-default" multiple="multiple">
          <option value="square">Square</option>
          <option value="rectangle" selected>Rectangle</option>
          <option value="rombo">Rombo</option>
          <option value="romboid">Romboid</option>
          <option value="trapeze">Trapeze</option>
          <option value="traible" selected>Triangle</option>
          <option value="polygon">Polygon</option>
        </select>
      </div>

    // Select With Icon
    $(".select2-icons").select2({
        dropdownAutoWidth: true,
        width: '100%',
        minimumResultsForSearch: Infinity,
        templateResult: iconFormat,
        templateSelection: iconFormat,
        escapeMarkup: function (es) { return es; }
    });

    // Format icon
    function iconFormat(icon) {
        var originalOption = icon.element;
        if (!icon.id) { return icon.text; }
        var $icon = "" + $(icon.element).data('icon') + "" + icon.text;

        return $icon;
    }

    // Limiting the number of selections
    $(".max-length").select2({
        dropdownAutoWidth: true,
        width: '100%',
        maximumSelectionLength: 2,
        placeholder: "Select maximum 2 items"
    });

#### Advance Options

- View
- Html
- Js

###### Loading Remote Data

Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API.

###### Customizing How Results Are Matched

Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere: This custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.

###### Programmatic access

Select2 supports methods that allow programmatic control of the component.

###### Loading Array Data

Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.

    // Loading Remote Data
    <select class="select2-data-ajax browser-default" id="select2-ajax"></select>
    // Customizing How Results Are Matched
    <div class="input-field">
      <select class="select2-customize-result browser-default" multiple="multiple"
        id="select2-customize-result">
        <optgroup label="Figures">
          <option value="romboid">Romboid</option>
          <option value="trapeze">Trapeze</option>
          <option value="triangle">Triangle</option>
          <option value="polygon">Polygon</option>
        </optgroup>
        <optgroup label="Colors">
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
          <option value="purple">Purple</option>
        </optgroup>
      </select>
    </div>
    // Programmatic access
    <div class="input-field">
        <select class="select2 js-example-programmatic browser-default" id="programmatic-single">
          <optgroup label="Alaskan/Hawaiian Time Zone">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
          </optgroup>
          <optgroup label="Pacific Time Zone">
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
            <option value="OR">Oregon</option>
            <option value="WA">Washington</option>
          </optgroup>
          <optgroup label="Eastern Time Zone">
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="IN">Indiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="OH">Ohio</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WV">West Virginia</option>
          </optgroup>
        </select>
      </div>
      <div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
        <div class="btn-group-sm" aria-label="Set Select2 option">
          <button class="js-programmatic-set-val btn">
            Set"California"
          </button>
        </div>
        <div class="btn-group-sm" role="group" aria-label="Open and close">
          <button class="js-programmatic-open btn">
            Open
          </button>
          <button class="js-programmatic-close btn">
            Close
          </button>
        </div>
        <div class="btn-group-sm" role="group" aria-label="Initialize and destroy">
          <button class="js-programmatic-init btn">
            Init
          </button>
          <button class="js-programmatic-destroy btn">
            Destroy
          </button>
        </div>
      </div>
      // Loading array data
      <div class="input-field">
          <select class="select2-data-array browser-default" id="select2-array"></select>
        </div>

      // Loading remote data
      $(".select2-data-ajax").select2({
          dropdownAutoWidth: true,
          width: '100%',
          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
          },
          placeholder: 'Search for a repository',
          escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
          minimumInputLength: 1,
          templateResult: formatRepo,
          templateSelection: formatRepoSelection
      });

    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='icon-code-fork mr-0'></i> " + repo.forks_count + " Forks</div>" +
            "<div class='select2-result-repository__stargazers'><i class='icon-star5 mr-0'></i> " + repo.stargazers_count + " Stars</div>" +
            "<div class='select2-result-repository__watchers'><i class='icon-eye mr-0'></i> " + repo.watchers_count + " Watchers</div>" +
            "</div>" +
            "</div></div>";

        return markup;
    }

    function formatRepoSelection(repo) {
        return repo.full_name || repo.text;
    }
    // Customizing how result are matched
    // Customizing how results are matched
    function matchStart(term, text) {
        if (text.toUpperCase().indexOf(term.toUpperCase()) === 0) {
            return true;
        }

        return false;
    }

    $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
        $(".select2-customize-result").select2({
            dropdownAutoWidth: true,
            width: '100%',
            placeholder: "Search by 'r'",
            matcher: oldMatcher(matchStart)
        });
    });

    // Programmatic access
    var $select = $(".js-example-programmatic").select2({
        dropdownAutoWidth: true,
        width: '100%'
    });
    var $selectMulti = $(".js-example-programmatic-multi").select2();
    $selectMulti.select2({
        dropdownAutoWidth: true,
        width: '100%',
        placeholder: "Programmatic Events"
    });
    $(".js-programmatic-set-val").on("click", function () { $select.val("CA").trigger("change"); });

    $(".js-programmatic-open").on("click", function () { $select.select2("open"); });
    $(".js-programmatic-close").on("click", function () { $select.select2("close"); });

    $(".js-programmatic-init").on("click", function () { $select.select2(); });
    $(".js-programmatic-destroy").on("click", function () { $select.select2("destroy"); });

    $(".js-programmatic-multi-set-val").on("click", function () { $selectMulti.val(["CA", "AL"]).trigger("change"); });
    $(".js-programmatic-multi-clear").on("click", function () { $selectMulti.val(null).trigger("change"); });

    // Loading array data
    var data = [
        { id: 0, text: 'enhancement' },
        { id: 1, text: 'bug' },
        { id: 2, text: 'duplicate' },
        { id: 3, text: 'invalid' },
        { id: 4, text: 'wontfix' }
    ];

    $(".select2-data-array").select2({
        dropdownAutoWidth: true,
        width: '100%',
        data: data
    });

#### Size

- View
- Html
- Js

For different sizes of select2, Use classes like `.select2-size-sm` & `.select2-size-lg` for Large, small & Extra Small Select respectively.

###### Large

###### Default

###### Small

    // Large
    <div class="input-field">
        <select class="select2-size-lg browser-default" id="large-select">
          <option value="square">Square</option>
          <option value="rectangle">Rectangle</option>
          <option value="rombo">Rombo</option>
          <option value="romboid">Romboid</option>
          <option value="trapeze">Trapeze</option>
          <option value="traible">Triangle</option>
          <option value="polygon">Polygon</option>
        </select>
      </div>
      // Small
      <div class="input-field">
          <select class="select2-size-sm browser-default" id="small-select">
            <option value="square">Square</option>
            <option value="rectangle">Rectangle</option>
            <option value="rombo">Rombo</option>
            <option value="romboid">Romboid</option>
            <option value="trapeze">Trapeze</option>
            <option value="traible">Triangle</option>
            <option value="polygon">Polygon</option>
          </select>
        </div>

    // Large
    $('.select2-size-lg').select2({
        dropdownAutoWidth: true,
        width: '100%',
        containerCssClass: 'select-lg'
    });

    // Small
    $('.select2-size-sm').select2({
        dropdownAutoWidth: true,
        width: '100%',
        containerCssClass: 'select-sm'
    });

#### Multi Select Size

- View
- Html
- Js

For different sizes of select2, Use classes like `.select2-size-sm` & `.select2-size-lg` for Large, small & Extra Small Select respectively.

###### Large

###### Default

###### Small

    //large
    <div class="input-field">
        <select class="select2-size-lg browser-default" multiple="multiple" id="large-select-multi">
          <option value="square" selected>Square</option>
          <option value="rectangle">Rectangle</option>
          <option value="rombo">Rombo</option>
          <option value="romboid">Romboid</option>
          <option value="trapeze">Trapeze</option>
          <option value="traible">Triangle</option>
          <option value="polygon">Polygon</option>
        </select>
      </div>
      //small
    <div class="input-field">
      <select class="select2-size-sm browser-default" multiple="multiple" id="small-select-multi">
        <option value="square">Square</option>
        <option value="rectangle">Rectangle</option>
        <option value="rombo" selected>Rombo</option>
        <option value="romboid">Romboid</option>
        <option value="trapeze">Trapeze</option>
        <option value="traible">Triangle</option>
        <option value="polygon">Polygon</option>
      </select>
    </div>

    // Large
    $('.select2-size-lg').select2({
        dropdownAutoWidth: true,
        width: '100%',
        containerCssClass: 'select-lg'
    });

    // Small
    $('.select2-size-sm').select2({
        dropdownAutoWidth: true,
        width: '100%',
        containerCssClass: 'select-sm'
    });

add

- help_outline
- widgets
- today
- mail_outline

settings
close

##### Theme Customizer

Customize & Preview in Real Time

###### Navbar Options

###### Footer Options

add_shopping_cart