JSFiddle - React, Tailwind, and code Playground

by rwinch

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<p>
  I'd like an easy way for users to add all matches. For example the user
</p>
<ul>
  <li>Enters "A"</li>
  <li>Presses CTRL+A or Meta+A all matches are selected</li>
  <li>Presses enter all matches are added</li>
</ul>
<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="WY">Wyoming</option>
</select>

CSS

select {
  width: 100%;
}

JavaScript

$(".js-example-basic-multiple").select2();