SearchInput.vue

<template>
    <div v-click-outside="close">
        <label v-if="label" class="form-label" @click="open">{{ label }}:</label>
        <div class="relative">
            <div ref="input" @click="open" @focus="open" @keydown.down.prevent="open" @keydown.up.prevent="open" :class="{ focus: show, error: error }" class="form-input pr-6" :tabindex="show ? -1 : 0">
                <slot v-if="value"></slot>
                <div v-else-if="data.length === 0" class="text-grey-600">No options found</div>
                <div v-else class="text-grey-600">Click to choose…</div>
            </div>
            <button type="button" @click.stop="clear" v-if="value" tabindex="-1" class="absolute p-2 inline-block text-grey-500 hover:text-amber-700" style="right: 4px; top: 8px;">
                <svg class="block fill-current icon w-2 h-2" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908">
                    <path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z"/>
                </svg>
            </button>
        </div>
        <div v-if="error" class="form-error">{{ error }}</div>
        <div v-if="show" ref="dropdown" class="absolute pin-t pin-l my-1 shadow-lg rounded bg-white overflow-hidden" :style="{ width: inputWidth + 'px', zIndex: 2000 }">
            <div class="p-2 bg-grey-300">
                <input ref="search" v-model="search" @keydown.enter.prevent="chooseSelected" @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" class="w-full px-3 py-1.5 text-xs leading-normal bg-white rounded text-grey-900" tabindex="-1" type="text" placeholder="Search…" spellcheck="false">
            </div>
            <div ref="container" class="relative overflow-y-auto scrolling-touch text-sm" tabindex="-1" style="max-height: 155px;">
                <div v-for="(option, index) in filtered" :key="getTrackedByKey(option)" :ref="index === selected ? 'selected' : null" @click="choose(option)" class="px-4 py-2 cursor-pointer" :class="{ 'hover:bg-grey-200 text-grey-800': index !== selected, 'bg-amber-500 hover:bg-amber-600 text-white': index === selected }">
                    <slot name="option" :option="option" :selected="index === selected"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Popper from 'popper.js'

export default {
    inheritAttrs: false,
    props: ['value', 'data', 'trackBy', 'searchBy', 'label', 'error', 'boundary'],
    data() {
        return {
            show: false,
            search: '',
            selected: 0,
            popper: null,
            inputWidth: null,
        }
    },
    computed: {
        filtered() {
            return this.data.filter(option => {
                if (_.isArray(this.searchBy)) {
                    return !_(this.searchBy).filter(key => _.includes(_.toString(_.get(option, key)).toLowerCase(), this.search.toLowerCase())).isEmpty()
                }

                return _.includes(_.get(option, this.searchBy).toLowerCase(), this.search.toLowerCase())
            })
        },
    },
    watch: {
        search(search) {
            this.selected = 0
            this.$refs.container.scrollTop = 0
        },
        show(show) {
            if (show) {
                let selected = _.findIndex(this.data, [this.trackBy, _.get(this.value, this.trackBy)])
                if (selected !== -1) this.selected = selected
                this.inputWidth = this.$refs.input.offsetWidth

                Vue.nextTick(() => {
                    const vm = this

                    this.popper = new Popper(this.$refs.input, this.$refs.dropdown, {
                        placement: 'bottom-start',
                        onCreate() {
                            vm.$refs.container.scrollTop = vm.$refs.container.scrollHeight
                            vm.updateScrollPosition()
                            vm.$refs.search.focus()
                        },
                        modifiers: {
                            preventOverflow: { boundariesElement: this.boundary ? this.boundary : 'scrollParent' },
                        },
                    })
                })
            } else {
                this.search = ''
                if (this.popper) this.popper.destroy()
            }
        }
    },
    mounted() {
        document.addEventListener('keydown', (e) => {
            if (this.show && (e.keyCode == 9 || e.keyCode == 27)) {
                setTimeout(() => this.close(), 50)
            }
        })
    },
    methods: {
        getTrackedByKey(option) {
            return _.get(option, this.trackBy)
        },
        open() {
            if (this.data.length) {
                this.show = true
            }
        },
        close() {
            this.show = false
        },
        clear() {
            this.$emit('input', null)
        },
        move(offset) {
            let newIndex = this.selected + offset

            if (newIndex >= 0 && newIndex < this.filtered.length) {
                this.selected = newIndex
                this.updateScrollPosition()
            }
        },
        updateScrollPosition() {
            Vue.nextTick(() => {
                if (this.$refs.selected[0].offsetTop > (this.$refs.container.scrollTop + this.$refs.container.clientHeight - this.$refs.selected[0].clientHeight)) {
                    this.$refs.container.scrollTop = this.$refs.selected[0].offsetTop + this.$refs.selected[0].clientHeight - this.$refs.container.clientHeight
                }

                if (this.$refs.selected[0].offsetTop < this.$refs.container.scrollTop) {
                    this.$refs.container.scrollTop = this.$refs.selected[0].offsetTop
                }
            })
        },
        chooseSelected() {
            if (this.filtered[this.selected] !== undefined) {
                this.$emit('input', this.filtered[this.selected])
                this.$refs.input.focus()
                Vue.nextTick(() => this.close())
            }
        },
        choose(option) {
            this.selected = _.findIndex(this.data, [this.trackBy, _.get(option, this.trackBy)])
            this.$emit('input', option)
            this.$refs.input.focus()
            Vue.nextTick(() => this.close())
        },
    },
}
</script>

@reinink First off...thanks for sharing this. As I was listening to your podcast with Adam, I was hoping that you'd post this somewhere. I'm trying to convert an app over to using Vue and this is a great help. Unfortunately, I'm still having a difficult time of wrapping my head around how this works. Could you share how you'd use this in your form?