vue-multiselect-typeahead

vue-multiselect-typeahead

<template>
    <div class="ajax-select" :class="{'default': ! isTouched}">
        <multiselect
                :options="options"
                :selected.sync="selected"
                :multiple="false"
                :placeholder="placeholder"
                :on-search-change="fetchData"
                key=""
                :label="label"
                :show-labels="false"
                :touched.sync="isTouched"
                :on-change="onChange"
                @click="onClick"
                @focus="onClick"
        ></multiselect>
    </div>
</template>

<script>
    import ajaxSelectMixin from './ajax-select-mixin'

    export default{
        mixins: [ajaxSelectMixin],
        methods: {
            onClick (){
                this.isClicked = true
                this.fetchData(null)
            },
            fetchData (value){
                if (! this.isClicked) {
                    return
                }

                let originalEntry = {}
                originalEntry[this.label] = value
                this.options = [originalEntry]

                let response = {filters: {}}
                response.filters[this.label] = value ? value : ''

                this.$api_demo.load(this.source, response)
                    .then(function (response) {
                        let options = response.data
                        options.unshift(originalEntry)
                        this.options = options
                    })
            },
        }
    }
</script>

<style lang="scss">
    @import 'ajax-select';
</style>