Created
December 20, 2018 06:47
-
-
Save WJWang/d7b65991a8d283f114b0c6e8683cc8ec to your computer and use it in GitHub Desktop.
auto complete
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template lang="html" id="autocomplete"> | |
<div class="sample-row row autocomplete-wrapper"> | |
<div class="autocomplete row"> | |
<div class="sample-col sample-col col-xs-1 sample-col col-form-label area-label">{{ title }}</div> | |
<div class="sample-col col-xs-6"> | |
<input class="form-control" type="text" placeholder="search word here..." @blur="emptyInput" v-model="searchWord" maxlength="40" /> | |
<span class="fold-icon" @click="emptyInput" v-if="!!searchWord"> | |
<i class="fa fa-close" aria-hidden="true"></i> | |
</span> | |
<transition name="fade"> | |
<div class="selector-list" v-if="isListOpen"> | |
<div class="selector-list-item" v-for="item in optionList" @click="addToResultList(item)"> | |
{{ item.value }} | |
<span class="pull-right"><i class="fa fa-plus" aria-hidden="true"></i></span> | |
</div> | |
</div> | |
</transition> | |
</div> | |
</div> | |
<div class="rec-list-area row"> | |
<div class="sample-col col-xs-12"> | |
<button type="button" v-for="result in reverseResultList" class="sample-rec-item btn sample-btn-primary btn-xs" @click="deletFromResult(result)"><i class="fa fa-times fa-fw"></i>{{ result.value }}</button> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
require('es6-promise/auto') | |
import find from 'lodash/find'; | |
import findIndex from 'lodash/findIndex'; | |
import debounce from 'lodash/debounce'; | |
import { API_HOST, recCompanySearch } from '../actions/'; | |
import axios from 'axios' | |
export default { | |
template: '#autocomplete', | |
props: ['title', 'terrCode', 'resultList'], | |
data() { | |
return { | |
searchWord: '', | |
optionList: [], | |
isSearching: false | |
} | |
}, | |
methods: { | |
addToResultList(item) { | |
const isExistd = find(this.resultList, function(resutlItem) { | |
return resutlItem.id == item.id; | |
}); | |
if (!isExistd) { | |
this.resultList.push(item); | |
} | |
this.emptyInput(); | |
}, | |
deletFromResult(item) { | |
const foundIdx = findIndex(this.resultList, function(result) { | |
return result.id === item.id; | |
}); | |
this.resultList.splice(foundIdx, 1); | |
}, | |
emptyInput() { | |
this.searchWord = ''; | |
this.optionList = []; | |
}, | |
getSearchResult: debounce(function() { | |
const ctx = this; | |
if (!this.searchWord) return; | |
axios({ | |
method: 'GET', | |
url: `${API_HOST}/api/rec-company/search?terr_code=${this.terrCode}&text=${this.searchWord}`, | |
}).then(response => { | |
if (response.data.status === 200) { | |
ctx.optionList = response.data.data.map(function(option) { | |
return { | |
id: option.rec_id, | |
value: option.rec_name | |
} | |
}); | |
} | |
}) | |
}, 300), | |
}, | |
computed: { | |
isListOpen() { | |
return !!this.optionList.length; | |
}, | |
reverseResultList() { | |
return this.resultList.reverse(); | |
} | |
}, | |
watch: { | |
searchWord(newSearchWord) { | |
(!!newSearchWord) ? this.getSearchResult(newSearchWord) : this.emptyInput(); | |
} | |
} | |
} | |
</script> | |
<style lang="css"> | |
.rec-list-area { | |
margin-left: 6.3%; | |
} | |
.autocomplete-wrapper { | |
width: 90%; | |
margin: 40px auto; | |
} | |
.sample-rec-item { | |
margin: 10px 5px; | |
} | |
.area-label { | |
line-height: 32px; | |
} | |
.fold-icon { | |
position: absolute; | |
right: 8px; | |
color: #8e8c8c; | |
top: 4px; | |
font-size: 16px; | |
cursor: pointer; | |
} | |
.fold-icon:hover { | |
color: #6f6d6d; | |
} | |
.selector-list { | |
max-height: 300px; | |
overflow: auto; | |
background-color: #fff; | |
width: 100%; | |
position: absolute; | |
z-index: 200; | |
border: solid 1px #ddd; | |
border-radius: 0 0 6px 6px; | |
border-top: none; | |
box-shadow: 0px 2px 5px #969696; | |
} | |
.selector-list-item { | |
min-height: 30px; | |
padding: 5px; | |
margin: 2px 0px; | |
box-sizing: border-box; | |
cursor: pointer; | |
} | |
.selector-list-item:hover { | |
background-color: rgba(18, 159, 184, 0.6) | |
} | |
.hover-selector-list-item { | |
background-color: rgba(18, 159, 184, 0.6) | |
} | |
.active-selector-list-item { | |
background-color: rgb(18, 159, 184) | |
} | |
.selector-list-item:active { | |
background-color: rgb(18, 159, 184) | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment