FindSelect 만들기

<template>
<div class="coworker_sel" :class="{zi_10 : dpToggle}">
<button type="button" class="btn_clear" v-if="search" @click="itemDel"><i class="xi-close-circle-o"></i></button>
<input type="text" v-on:input="search = $event.target.value" v-bind:value="search" v-on:keyup="filter"
v-on:keydown.down="keyDown" v-on:keydown.up="keyUp" v-on:keydown.enter="selectItem" @click="dp_show(null)">
<div class="arr_toggle" :class="{ roX_180 : dpToggle }" @click="dp_toggle"></div>
<div v-show="dpToggle" ref="selItem" :class="{ mt_20 : dpToggle }">
<ul class="worker_list">
<li v-for="(item, index) in search_workers" :class="{active: index == keyDownIndex}">
<button type="button" @click="selectItem2(item)">{{item.queryVal}}</button></li>
</ul>
</div>
</div>
</template>

 

 

<script>
export default {
name: "FindSelect",
props:['fromData', 'value'],
data:()=>({
dpToggle : false,
isFocus : '10',
search_workers: [],
search : '',
select:'',
tempSelect:true,
keyDownIndex : -1,
}),
watch:{
value()
{
if(this.value)
{
this.search = this.value.queryVal;
this.select = this.value
}
},
},
mounted() {
if(this.value)
{
this.search = this.value.queryVal;
this.select = this.value
}
},
methods:{
dp_toggle() {
this.search_workers = Array.prototype.slice.call(this.fromData);
if(this.search_workers)
{
this.dpToggle = !this.dpToggle;
}
},
dp_show(item) {
this.keyDownIndex = -1;
this.search_workers = Array.prototype.slice.call(this.fromData);
if(this.search_workers)
{
if(item != null)
{
this.search = item.queryVal
}
this.dpToggle = true;
}
},
dp_none() {
if(this.dpToggle) { // 트리영역 외의 지점 클릭했을 때
this.dpToggle = false; // 트리영역 display none
}
},
keyUp(event)
{
if(this.keyDownIndex >= 1)
{
this.keyDownIndex--;

let position = $('.worker_list li.active').position();
if (position){
// console.log(position.top)
// console.log($('.worker_list li.active').position().top)
// $(this.$refs.selItem).find('.worker_list').scrollTop(position.top)
}
}
},
keyDown(event)
{
if(this.keyDownIndex < this.search_workers.length-1 )
{
this.keyDownIndex++;

let position = $('.worker_list li.active').position();
if (position){
// console.log(position.top)
// console.log($('.worker_list li.active').position().top)
// $(this.$refs.selItem).find('.worker_list').scrollTop(position.top)
}
}
},
selectItem(event)
{
if(this.keyDownIndex > -1)
{
this.search = this.search_workers[this.keyDownIndex].queryVal;
this.select = this.search_workers[this.keyDownIndex];
this.$emit('input', this.select);
this.dp_none()
}
},
selectItem2(item) {
if(item != null)
{
this.search = item.queryVal;
this.select = item;
this.$emit('input', this.select);
this.dp_none()
}
},
filter()
{
this.search_workers= [];
if(this.search != '')
{
this.search_workers = this.fromData.filter((item)=>{
let strIndex = item.queryVal.indexOf(this.search);
if(strIndex > -1)
{
return item
}

});
this.searchTemp_workers = Array.prototype.slice.call(this.search_workers)
}else
{
this.search_workers = this.fromData
}
},
// 입력된 인풋값 삭제
itemDel() {
this.search = '';
this.select = null;
this.$emit('input', null)
},
}
}
</script>