<template>
    <form autocomplete="off">
        <div class="input-group">
            <input type="text" class="form-control" :placeholder="placeholder" v-model="query" @keyup.enter="onEnter">
            <slot name="append"></slot>
            <button class="btn btn-outline-primary" type="button" @click="onClick">
                Search
            </button>
        </div>
    </form>
</template>

<script>
export default {
    props: {
        placeholder: String,
        searchCallback: Function
    },
    data() {
        return {
            query: "",
            disabled: false
        };
    },
    methods: {
        onClick() {
            this.disabled = true;
            this.searchCallback(this.query);
            this.disabled = false;
        },
        onEnter() {
            this.disabled = true;
            this.searchCallback(this.query);
            this.disabled = false;
        }
    }

};
</script>
