بناء select search وإضافة البيانات للjs

كنت استخدم الselect الافتراضي الموجود في html

<div class=" mb-3 col-md-6 ">
    <label class="form-label" for="committee_id">اسم اللجنة</label>
    <select wire:model="committee_id" id="committee_id" class="form-control"
        name="committee_id" placeholder="الرجاء إدخال اسم اللجنة ">
        <option value="" selected>اسم اللجنة </option>
        @foreach ($collection as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
        @endforeach
    </select>
    <div class="fv-plugins-message-container invalid-feedback ">
        الرجاء إدخال اسم اللجنة
    </div>
    @error('committee_id')
        <div class="text-danger px-2 showValidationError ">
            {{ $message }}
        </div>
    @enderror
</div>

ولكن عملنا select search جديد يحتوي حاليا على collection بيانات افتراضية مثل ماهو موضح في الكود اسفل

<div class=" mb-3 col-md-6 ">
    <label class="form-label" for="wrapper_searchable">اسم اللجنة</label>
    <div class="wrapper_searchable">
        <div class="form-control form_control_s">
            <span>اسم اللجنة</span>
            <i class="uil uil-angle-down"></i>
        </div>
        <div class="content-searchable">
            <div class="search-searchable">
                <i class="uil uil-search"></i>
                <input spellcheck="false" type="text" placeholder="بحث">
            </div>
            <ul class="options_searchable"></ul>
        </div>
    </div>
</div>
@script
<script>
$wire.on('search_opend', (event) => {
    let interval_id = setInterval(() => {
        const wrapper_searchable = document.querySelector(".wrapper_searchable"),
            selectBtn = wrapper_searchable.querySelector(".form-control"),
            searchInp = wrapper_searchable.querySelector("input"),
            options_searchable = wrapper_searchable.querySelector(".options_searchable");

        let collection = ["اللجنة الاولى", "اللجنة الثانية", "اللجنة التالثة", "اللجنة الرابعة"];

        function addCountry(selectedCountry) {
            options_searchable.innerHTML = "";
            collection.forEach(country => {
                let isSelected = country == selectedCountry ? "selected" : "";
                let li = `<li onclick="updateName(this)" class="${isSelected}">${country}</li>`;
                options_searchable.insertAdjacentHTML("beforeend", li);
            });
        }
        addCountry();

        function updateName(selectedLi) {
            searchInp.value = "";
            addCountry(selectedLi.innerText);
            wrapper_searchable.classList.remove("active");
            selectBtn.firstElementChild.innerText = selectedLi.innerText;
        }

        searchInp.addEventListener("keyup", () => {
            let arr = [];
            let searchWord = searchInp.value.toLowerCase();
            arr = collection.filter(data => {
                return data.toLowerCase().startsWith(searchWord);
            }).map(data => {
                let isSelected = data == selectBtn.firstElementChild.innerText ? "selected" : "";
                return `<li onclick="updateName(this)" class="${isSelected}">${data}</li>`;
            }).join("");
            options_searchable.innerHTML = arr ? arr : `<p style="margin-top: 10px;">Oops! Country not found</p>`;
        });

        selectBtn.addEventListener("click", () => wrapper_searchable.classList.toggle("active"));
    }, 1000);
});
</script>
@endscript

كيف يمكنني إضافة البيانات collection$ التي جلبتها من الداتابيس وارسالها الى javascript