Display the multiple selections as pills

How Do I...
#1

I am using SELECT2 for the first time and have made my way through the documentation.

In my header of the HTML I have:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

In the body I have:

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

And the external js file I have:

$(document).ready(function() {
    $('.js-example-basic-multiple').select2({
        placeholder: 'Select an option',
        allowClear: true,
        selectionAdapter: MultipleSelection,
        theme: "classic",
        tokenSeparators: [,],
        scrollAfterSelect: true,
        tags: true
    });
})

Currently I’m just seeing the multi-select box but it is not being displayed as a dropdown with the pills showing on selection.

#2

I’m also getting two errors on the page:

 Uncaught ReferenceError: jQuery is not defined
    <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js:2

and

Uncaught ReferenceError: $ is not defined
    <anonymous> file://......./Coding/GitHub/RichardConvery repositories/Job-listings-with-filtering/resources/js/filter.js:1
#3

Those errors are telling you what’s wrong: you haven’t sourced in jQuery, which Select2 relies upon but does not include. (To be fair, the Select2 documentation doesn’t make this clear.)

You must source in jQuery yourself, before sourcing Select2. Add this line before the <script> tag that sources Select2:

  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>