Laravel Searchable Dropdown Component

_virtual-select.scss

// custom style using sass & tailwindcss

.vscomp-ele {
    max-width: 100% !important;

    .vscomp-toggle-button {
        @apply mt-1 border-gray-300 transition block w-full duration-150 rounded-md shadow-inner bg-gray-100 py-3;

        &:focus {
            @apply border border-info ring-info ring-opacity-25;
        }
    }

    .vscomp-value {
        opacity: 1 !important;

        @apply text-gray-600 font-semibold
    }

    .vscomp-search-container {
        @apply border border-red-300;

    }
    
    .vscomp-search-input {
        width: 100% !important;
        padding: 0;
        border: none !important;

        &:focus {
            border: none !important;
            border-color: transparent !important;

        }
    }

    .vscomp-options {
        @apply bg-gray-200
    }

}

searchable-dropdown.blade.php

@props([
        'itemId', 'collection', 'itemLabel', 'itemValue',
        'searchable', 'multipleChoices', 'propertyName',
        'initialValue', 'additionalItems' => []
    ])

@once
    @push('css')
        <link rel="stylesheet" href="{{ asset('css/tooltip.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/virtual-select.min.css') }}">
    @endpush
@endonce

<div wire:ignore
    {!!
        $attributes->merge([
            'class' => 'w-full',
        ])
    !!}></div>

@push('js')
    @once
        <script src="{{ asset('js/tooltip.min.js')}}"></script>
        <script src="{{ asset('js/virtual-select.min.js')}}"></script>
    @endonce

    <script>
        @php($newPropertyName = str_replace('.', '', $propertyName))

        let {{  $newPropertyName . 'Collection' }} = [
                    @foreach($collection as $item)
                        {
                            label: "{{ $item->{$itemLabel} }}",
                            value: "{{ $item->{$itemValue} }}"
                        },
                    @endforeach

                    @if(count($additionalItems))
                        @foreach($additionalItems[0] as $label => $value)
                            {
                                label: "{{ $label }}",
                                value: "{{ $value }}"
                            },
                        @endforeach
                    @endif
                ];
            VirtualSelect.init({
                ele: "#{{ $itemId }}",
                options: {{ $newPropertyName. 'Collection' }},
                multiple: Boolean({{ $multipleChoices }}), // "{{ $multipleChoices == 'yes' ? true : false }}"
                search: Boolean({{ $searchable }}) // "{{ $searchable == 'yes' ? true : false }}"
            });

            let {{ $newPropertyName . 'SelectedItems'}} = document.querySelector("#{{ $itemId }}")

            @if(isset($initialValue))
                document.querySelector('#{{ $itemId }}').setValue("{{ $initialValue }}");
            @endif

            if ({{ $newPropertyName . 'SelectedItems'}}) {
                {{ $newPropertyName . 'SelectedItems'}}.addEventListener('change', () => {
                    let data = {{ $newPropertyName . 'SelectedItems'}}.value
                    @this.set("{{ $propertyName }}", data)
                })
            }
    </script>
@endpush

searchable.blade.php

<!-- Example on how to use it -->

<x-inputs.searchable-dropdown
    item-id="category-items"
    :collection="$categories"
    :searchable="true"
    :multiple-choices="false"
    item-label="name"
    item-value="id"
    property-name="category"
    old="category"
    id="category-items"
/>

Sources:
Virtual Select Plugin: https://sa-si-dev.github.io/virtual-select/

Update:

the css/js tags below in the component, you can either download the minified version of the plugin via npm or use it directly like I did, or use the CDN version, everything is in the get-started section in the plugin page.

Any question, I'm happy to answer them below in the comments section.