livewire에서 fuse.io select 새로운 방법으로 작업
제가 Livewire에서 Fuse.js를 활용해 효율적으로 select 박스를 관리하는 새로운 방법을 고안했습니다. 불필요한 데이터 처리를 줄여 성능을 개선했어요.
GGAMI
<label class="block text-sm font-medium text-gray-700">
거래처
</label>
<div wire:ignore
class="mt-1">
<div x-data="
{
value: @entangle('company_id'),
open: false,
data: {},
focusedOptionIndex: null,
options: {},
input: '',
previousInput: '',
fuse: null,
ing: false,
disabled: false,
fuseInit: function () {
console.log(this.data)
this.fuse = new Fuse(this.data, { includeMatches: true, threshold: 0.1, keys: ['name'] })
},
selectClick: function (data) {
this.open = !this.open
if(this.fuse === null) {
this.data = data
this.fuseInit()
}
},
openListbox: function (data) {
this.$nextTick(() => {
this.$refs.listbox.style.width = `${this.$refs.select.getBoundingClientRect().width}px`;
this.$refs.input.focus();
})
},
closeListbox: function () {
this.focusedOptionIndex = null
this.options = {}
this.input = ''
this.previousInput = ''
this.ing = false
},
focusNextOption: function () {
if (this.focusedOptionIndex + 1 >= Object.keys(this.options).length) return
this.focusedOptionIndex++
if(this.options[this.focusedOptionIndex] !== undefined) {
let pos = getRelativePos(this.$refs.list.children[this.focusedOptionIndex+1]);
if(pos.next !== undefined) {
this.$refs.list.scrollTop = pos.next;
}
}
},
focusPreviousOption: function () {
if (this.focusedOptionIndex <= 0) return
this.focusedOptionIndex--
if(this.options[this.focusedOptionIndex] !== undefined) {
let pos = getRelativePos(this.$refs.list.children[this.focusedOptionIndex+1]);
if(pos.next !== undefined) {
this.$refs.list.scrollTop = pos.next;
}
}
},
search: function () {
if(this.previousInput === this.input) return
this.options = this.fuse.search(this.input, { limit: 25 })
this.focusedOptionIndex = 0
this.$refs.list.scrollTop = 0
this.ing = false
this.previousInput = this.input
},
selectOption: function () {
if(this.input !== '' && this.options[this.focusedOptionIndex] !== undefined) {
let item = this.options[this.focusedOptionIndex].item
this.value = {'id': item.id, 'name':item.name}
}
this.$refs.select.focus();
this.open = false
},
resize: function () {
if(this.open) this.$refs.listbox.style.width = `${this.$refs.select.getBoundingClientRect().width}px`;
},
closeEvent: function () {
this.open = false
this.fuse = null
this.disabled = false
},
disabledSet: function () {
if($wire.get('submit') === 'update') {
this.disabled = true;
}
},
}"
x-init="
console.log(`select2-init`);
$watch('open', (value) => { if(value === true) { $nextTick(() => { openListbox() }) } else { closeListbox() } });
$watch('input', (value) => { ing = true });"
@open-event.window="disabledSet()"
@close-event.window="closeEvent()"
x-on:resize.window.prevent="resize()"
>
<div class="relative">
<input type="text" class="shadow-sm focus:ring-gray-500 focus:border-gray-500 block w-full text-xs sm:text-sm border-gray-300 cursor-pointer"
placeholder="선택"
readonly
:class="{ 'rounded-t-md' : open , 'rounded-md' : !open, 'cursor-not-allowed bg-gray-200' : disabled === true }"
x-ref="select"
x-model="value.name"
x-on:click="selectClick($component('collection').company_list)"
x-on:keydown.enter.prevent="selectClick($component('collection').company_list)"
x-bind:disabled="disabled"
>
<div class="flex-col fixed bg-white"
x-ref="listbox"
x-show="open"
x-cloak>
<input type="text" class="shadow-sm focus:ring-gray-500 focus:border-gray-500 block w-full text-xs sm:text-sm border-gray-300"
placeholder="내용 입력"
x-model="input"
x-ref="input"
x-on:click.away="open = false"
x-on:input.debounce.250="search()"
x-on:keydown.enter.prevent="selectOption()"
x-on:keydown.arrow-up.prevent="focusPreviousOption()"
x-on:keydown.arrow-down.prevent="focusNextOption()"
>
<div class="max-h-60 overflow-auto border-2 border-t-0"
x-ref="list">
<template x-for="(key, index) in Object.keys(options)" :key="index">
<div class="p-2 bg-white border-gray-300 focus:border-gray-500 cursor-pointer"
x-on:click="selectOption()"
x-on:mouseenter="focusedOptionIndex = index"
role="option"
:aria-selected="focusedOptionIndex === index"
:class="{ 'text-white bg-gray-500': index === focusedOptionIndex, 'text-gray-900': index !== focusedOptionIndex }"
>
<span x-text="options[index].item.name"
:class="{ 'font-semibold': index === focusedOptionIndex, 'font-normal': index !== focusedOptionIndex }"
class="block font-normal truncate text-xs md:text-sm xl:text-base"
></span>
</div>
</template>
<div class="p-2 bg-white border-gray-300 focus:border-gray-500 cursor-not-allowed text-blue-400 text-xs md:text-sm xl:text-base"
x-show="ing === true">검색 중...</div>
<div class="p-2 bg-white border-gray-300 focus:border-gray-500 cursor-not-allowed text-red-400 text-xs md:text-sm xl:text-base"
x-show="options.length === 0 && input !== '' && ing === false">검색 결과 없음</div>
<div class="p-2 bg-white border-gray-300 focus:border-gray-500 cursor-not-allowed text-gray-500 text-xs md:text-sm xl:text-base"
x-show="(options.length === 0 || options.length === undefined) && input === '' && ing === false">검색 내용 입력 (1자리 이상)</div>
</div>
</div>
</div>
</div>
</div>
@error('company_id')<p class="mt-1 text-sm text-red-500">{{ $message }}</p>@enderror
</div>
<div
wire:ignore
x-id="collection"
x-data="{
company_list: [],
product_list: [],
fetch() {
console.log(`data-fetch`);
$fetch({ url: '/request/company/3', method: 'get' }).then(({ data }) => {
this.company_list = data
})
$fetch({ url: '/request/product', method: 'get' }).then(({ data }) => {
this.product_list = data
})
},
}"
@open-event.window="fetch">
</div>