rewrite USerAutoSuggest without any dependency
This commit is contained in:
parent
da5844205c
commit
94e67ff118
2 changed files with 29 additions and 102 deletions
|
@ -1,41 +1,34 @@
|
|||
import { VueAutosuggest } from 'vue-autosuggest'
|
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
import userSearchApi from '../../services/new_api/user_search.js'
|
||||
|
||||
const debounceMilliseconds = 500
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueAutosuggest,
|
||||
BasicUserCard
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
query: '',
|
||||
results: [],
|
||||
timeout: null,
|
||||
selected: null,
|
||||
debounceMilliseconds: 500,
|
||||
inputProps: {
|
||||
id: 'autosuggest__input',
|
||||
onInputChange: this.fetchResults,
|
||||
placeholder: 'Search...',
|
||||
class: 'form-control'
|
||||
},
|
||||
suggestions: []
|
||||
timeout: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query (val) {
|
||||
this.fetchResults(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchResults (query) {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(() => {
|
||||
userSearchApi.search({query, store: this.$store})
|
||||
.then((data) => { this.suggestions = [{ data }] })
|
||||
}, this.debounceMilliseconds)
|
||||
},
|
||||
clickHandler (item) {
|
||||
return false
|
||||
},
|
||||
clickUserHandler () {
|
||||
console.log('clickUserHandler')
|
||||
return false
|
||||
this.results = []
|
||||
if (query) {
|
||||
userSearchApi.search({query, store: this.$store})
|
||||
.then((data) => { this.results = data })
|
||||
}
|
||||
}, debounceMilliseconds)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue