Select2 Multiple select using Livewire

Usage

       @livewire('select2-multiple')
    

Documentation

To use the select2 plugin, make sure you include its CSS and JS library in your project.

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>   

The javascript code is straightforward. We initialize the select2 box on the taskSelect input, and on the change event, we call the set event of livewire which sets the desired input field with the value of the select2 box.

Make sure you mark your select box with wire:ignore directive, this will make sure livewire does not repaint the input on reload, since we don't want to lose select2 classes and selected values.