Vue Autocomplete Component (with scoped slots)

autocomplete.js

Vue.component('autocomplete', {
    data () {
        return {
            dropdownVisible: false
        }
    },

    methods: {
        filterMethod (options, query) {
            return options.filter(option => option.toLowerCase().includes(query.toLowerCase()))
        },

        showDropdown () {
            this.dropdownVisible = true
        },

        hideDropdown () {
            this.dropdownVisible = false
        }
    },

    template: `
        <search-select
          :options="options"
          :filterMethod="filterMethod"
        >
            <div slot-scope="{ results, searchList }">
                <div class="autocomplete">
                    <input
                        type="text"
                        placeholder="Type to search list"
                        @input="searchList"
                        @focus="showDropdown"
                        @blur="hideDropdown"
                    />
                    <div class="autocomplete-dropdown" v-if="dropdownVisible">
                        <ul class="autocomplete-search-results-list">
                            <li 
                                class="autocomplete-search-result"
                                v-for="result in results"
                                :key="result"
                            >
                                {{ result }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </search-select>
    `
})