This is a heavily modified version of the original code by mithicher. The previous fork only worked one way so once the component was rendered the options list could not be changed.
If you have any improved versions or better approaches to this, please leave a comment and i'll add it up here. :)
Version 1 - Add code and descriptions.
Version 2 - Rewrite the code to have the script inside the alpine js x-init attribute, this was required because issues with addEventListener('load', ...) not triggering when ever the dropdown is loaded into the window after the initial state (behind a if / else branch).
Version 3 - Updated attributions, I used the wrong gist.
:options - This is an array of the format [ 'id' => 'any', 'title' => 'string', 'subtitle' => 'string' ] for the items in the select dropdown
:selectedItems - A string array of the selected items id's, this can be used in-place of x-model, kept over from the original implementation although I haven't really found a use for it.
id - required if multiple of the same wire:model binding is used
wire:model - The binding source for livewire
multiple - Allow multiple selection of items, returns an array of strings into wire:modal.
The item layout by default is [ 'id' => 'any', 'title' => 'string', 'subtitle' => 'string' ].
These can be modified by changing the renderTemplate in the x-data attribute of tom-select.blade.php file.
id in each item needs to be unique, tom select will not render items with the same id.
To enable real-time tracking of the model value's and item list we need to keep track of the dom, because of this we need an id for our element.
By default we are using the wire:modal attribute to create the id and reference that. ($modelId, $attrId and $compId - element id used).
<x-tom-select class="form-control mb-3"
wire:model="selectedCountry"
:options="[
[ 'id' => 'ENGLAND', 'title' => 'England', 'subtitle' => 'Population - 57,690,300' ],
[ 'id' => 'WALES', 'title' => 'Wales', 'subtitle' => 'Population - 3,164,400' ],
[ 'id' => 'SCOTLAND', 'title' => 'Scotland', 'subtitle' => 'Population - 5,490,100' ],
[ 'id' => 'NIRELAND', 'title' => 'North Ireland', 'subtitle' => 'Population - 1,920,400' ],
]"
/><x-tom-select class="form-control mb-3"
wire:model="form.clientTypeCategory"
:options="collect( \App\Models\Users::all() )
->map(fn ($item) => [ 'id' => $item->id, 'title' => $item->username,
'subtitle' => $item->email ])"
/><x-tom-select class="form-control mb-3"
wire:model="form.clientTypeCategory"
:options="\App\Models\Mattersphere\CodeLookup::SelectInputLookup('uCOMCLITYPE')"
/>
<?php
// file: /App/Models/Mattersphere/CodeLookup.php
public static function SelectInputLookup($cdType) {
return collect( self::where('cdType', $cdType)->all() )
->map(
fn ($item) => [ 'id' => $item->cdCode, 'title' => $item->cdDesc ]
)->toArray();
}<x-tom-select class="form-control" multiple
wire:model="form.clientWorkTypes"
:options="collect( \App\Models\Mattersphere\CodeLookup::SelectInputLookup('FILETYPE') )
->filter(fn($ft) => $ft['id'] != 'TEMPLATE')->values()->all()"
/><label>Please select a user:</label>
<x-tom-select class="form-control mb-3" wire:model="selectUserId"
:options="collect( \App\Models\Users::all() )
->map(fn ($item) => [ 'id' => $item->id, 'title' => $item->username,
'subtitle' => $item->email ])"
/>
<label>Please select a transaction:</label>
<x-tom-select class="form-control mb-3" wire:model="selectedTransactionId"
:options="collect( \App\Models\Transaction::where('user_id', '=', selectUserId)->all() )
->map(fn ($item) => [ 'id' => $item->id, 'title' => $item->username,
'subtitle' => $item->email ])"
/>