Hooong, hooong I tried to use select2 with Livewire.\ But select2 used jQuery, so I had no choice but to use jQuery alongside it.\ It really wasn't for me. So t
Hooong, hooong
I tried to use select2 with Livewire.
But select2 used jQuery, so I had no choice but to use jQuery alongside it.
It really wasn't for me.
So the repo I found was...
https://joshuajohnson.co.uk/Choices/
This one...
It wasn't a big problem. It worked well.
But once the data started to exceed 20,000 records, I ran into the problem of having to fetch all 20,000 records every time I opened the modal...
It was just too inconvenient...
So I improved things by using axios to fetch only the SQL records relevant to the search.
<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>For reference, after calling setChoices on the items received via axios, I had to reload the search results by calling _handleSearch(event.detail.value).
Since the Choices project itself hasn't been updated much... I did hesitate over whether I should use it.
But anyway... I suppose I could just use Choices.js...
While looking around, I came across https://fusejs.io/,
and I'm going to try building one myself with Alpine + Tailwind CSS using Fuse.js.
Well then, I'll write about the results with Fuse.js in the next post.