Skip to content

Instantly share code, notes, and snippets.

@wdmtech
Created October 28, 2016 08:13
Show Gist options
  • Save wdmtech/d28bfb72c6da8d5f4087a75d4d772a02 to your computer and use it in GitHub Desktop.
Save wdmtech/d28bfb72c6da8d5f4087a75d4d772a02 to your computer and use it in GitHub Desktop.
Awesomeplete (autocomplete) component for vue 2.0 (provided as-is)
<template>
<span>
<input ref="autocomplete"
v-model="model"
class="input awesomeplete"
:placeholder="placeholder"
:class="classes"
@keyup="typing"
type="text"
title
data-multiple/>
</span>
</template>
<script>
// https://leaverou.github.io/awesomplete/#advanced-examples
import Awesomplete from '../../../node_modules/awesomplete'
export default {
name: 'autocomplete',
props: {
placeholder: { default: '', type: String, required: false },
list: { default: '', type: Array, required: true },
classes: { default: String, type: String, required: false }
},
mounted () {
var self = this
this.$nextTick(() => {
this.awesomeplete = new Awesomplete(self.$refs.autocomplete, {
minChars: 1,
filter (text, input) {
return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0])
},
replace (text) {
var before = this.input.value.match(/^.+,\s*|/)[0]
this.input.value = before + text + ', '
}
})
})
},
data () {
return {
model: '',
awesomeplete: {}
}
},
methods: {
typing () {
this.$emit('typing')
this.awesomeplete._list = this.list
}
}
}
</script>
<style scoped>
@import '../../../node_modules/awesomplete/awesomplete.css';
</style>
@TomFranssen
Copy link

How did you get the import to work?
For me it's not an ES6 module so the import doesn't work :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment