JSFiddle - React, Tailwind, and code Playground

Important: Select2 with option of select all for visible entries after search. Great addon, Great Feature

by Karmik Patel

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
</head>
<body>
<select class="js-source-states" multiple="multiple" style="width:400px;">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
    <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>
   ...

JavaScript

$.fn.select2.amd.require([
  'select2/utils',
  'select2/dropdown',
  'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {
  function SelectAll() { }

  SelectAll.prototype.render = function (decorated) {
    var $rendered = decorated.call(this);
    var self = this;

    var $selectAll = $(
      '<button type="button">Select All</button>'
    );

    $rendered.find('.select2-dropdown').prepend($selectAll);

    $selectAll.on('click', function (e) {
      var $results = $rendered.find('.select2-results__option[aria-selected=false]');
      
      // Get all results that aren't selected
      $results.each(function () {
        var $result = $(this);
        
        // Get the data object for it
        var data = $result.data('data');
        
        // Trigger the select event
        self.trigger('select', {
          data: data
        });
      });
      
      self.trigger('close');
    });
    
    return $rendered;
  };

  $("select").select2({
    placeholder: "Select Option(s)...",
    dropdownAdapter: Utils.Decorate(
      Utils.Decorate(
        Dropdown,
        AttachBody
      ),
      SelectAll
    ),
  });
});