저는 Livewire에서 jQuery에 의존하는 Select2 대신 Choices.js를 사용했어요. 데이터가 많아지면서 axios로 개선했죠. 다음엔 Fuse.js로 도전해볼게요!
호옹 호옹
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 의 결과는.. 다음 포스팅에 적어보겠음.