livewire 에서 select2 말고 choices.js 사용하기

Updated on

호옹 호옹

livewire 에서 select2 를 사용하려고 했었다.
하지만, select2는 jquery 를 사용하고 있었고, 어쩔 수 없이 jquery 를 같이 사용했다.
영 ~ 아니였음.

그래서 찾은 repo 가…

https://joshuajohnson.co.uk/Choices/

이거였는데…

크게 문제되지는 않았다. 잘 사용 된다.

하지만, 데이터가 20000개 이상이 넘어가기 시작하면, modal 을 매번 열때마다 20000개의 data를 매번 받아와야하고 하는 문제점이 있더라…
너무 불편했던것이다…

그래서 axios 를 이용하여, 해당 내용에 맞는 sql 만 찾아오도록 개선하였다.

<div class="mt-1"
     x-data="{ value: @entangle('company_id').defer, set() { this.Element.setChoiceByValue(''); }, Element: null, Search: null }"
     x-init="
            () => {
                Element = new Choices($refs.input, {
                    renderChoiceLimit: 20,
                    searchFloor: 1,
                    searchResultLimit: 40,
                    searchFields: ['label'],
                    noResultsText: '찾을 수 없음',
                    itemSelectText: '💎',
                    resetScrollPosition: true,
                });
                 let timer = null
                 Element.passedElement.element.addEventListener(
                   'search',
                   function(event) {
                     if (event.detail.value.length > 0 && Search !== event.detail.value) {
                        Element.clearChoices();
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                           $fetch({ url: '/test/'+event.detail.value, method: 'get' }).then(({ data }) => {
                                Element.setChoices(data,'value','label',true)._handleSearch(event.detail.value)
                           })
                        }, 200);
                        Search = event.detail.value;
                     }
                   },
                   false,
                 );
            }
"
     x-on:change="value = $refs.input.value;"
     @open-event.window="set"
     wire:ignore>
    <div wire:ignore>
        <select class="block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 text-xs sm:text-sm"
                x-ref="input">
            <option value="">선택</option>
        </select>
    </div>
    @error('company_id')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
</div>

참고로, axios 값으로 받아온 애들을 setChoices 해주고나서, 꼭 _handleSearch(event.detail.value) 로 다시 검색결과를 리로드시켜줘야만 했다.
애초에 choices 프로젝트 자체가 업데이트가 잘 되지 않고 있기 때문에… 이걸 써도 되나 망설여지긴 했다.

하지만 어쨌든 그래도… 그냥 Choices.js 써도 되긴할텐데…

그냥 찾다보니 https://fusejs.io/ 를 찾게 되었고,
fusejs 를 통해서 직접 alpine + tailwindcss 로 한번 만들어보려고 한다.

자, 그러면 fusejs 의 결과는.. 다음 포스팅에 적어보겠음.

다른 글