ほうほう 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件の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の結果は……次の投稿に書くことにする。