吼吼，吼吼 我曾经想在 Livewire 中使用 Select2。\ 但是，Select2 使用 jQuery，所以我不得不同时使用 jQuery。\ 真是不怎么样。 于是我找到的 repo 是…… <https://joshuajohnson.co.uk/Choices/ 就是这个…… 没有什么大问题，用起来也不错。
吼吼，吼吼
我曾经想在 Livewire 中使用 Select2。
但是，Select2 使用 jQuery，所以我不得不同时使用 jQuery。
真是不怎么样。
于是我找到的 repo 是……
https://joshuajohnson.co.uk/Choices/
就是这个……
没有什么大问题，用起来也不错。
但是，当数据开始超过 20000 条时，每次打开 modal 都要重新获取 20000 条数据，这就成了一个问题……
实在太不方便了……
于是我改用 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/，
打算试着用 Fuse.js，直接通过 Alpine + Tailwind CSS 自己做一个。
那么，Fuse.js 的结果……就留到下一篇文章里写吧。