eiru_payments/src/components/common/DropdownSearcher.vue

<template lang="pug">
    .searcher
        span.input-icon.fa.fa-search(@click='onClickOptions')
        input.search-input(v-model='search' :placeholder='placeholder' autofocus @keyup.enter='enterPressed')
        .dropdown-options(:class="{'input-show': showOptions }" )
            ul.input-options
                li.input-option(v-for='option in getOptions()' :key='option.id' @click='onSelectOption(option)') {{ option[dispalyOption] }}
</template>

<script>
    export default {
        props: {
            placeholder: {
                type: String,
                default: 'Buscar'
            },
            autofocus: {
                type: Boolean,
                default: false
            },
            items: {
                type: Array,
                default: [],
                required: true
            },
            keys: {
                type: Array,
                default: [],
                required: true
            },
            dispalyOption :{
                type: Array,
                default: [],
            },
            acceptEnter: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            search(value, lastValue) {
                value = value.trim()

                if (!value && value.length != lastValue.length) {
                    this.selectedOption = null
                }

                this.showOptions = !!value && !this.selectedOption

                this.performSearch(value)
            }
        },
        methods: {
            enterPressed(){
                if(!this.acceptEnter)
                    return

                let item = {
                    'item': this.search,
                    'state' : 'new'
                }
                if (this.getOptions().length === 1 && this.getOptions()[0].number === this.search)
                    item = this.getOptions()[0]

                this.showOptions = false
                this.$emit('onSelect', item)
            },
            getOptions() {
                return this.results.length == 0 ? this.items : this.results
            },
            performSearch(value) {
                this.results = []

                if (this.selectedOption) {
                    return
                }

                for (let item of this.items) {
                    for (let field in item) {

                        if (typeof item[field] !== 'string') {
                            continue
                        }

                        if (this.keys.length !== 0 && this.keys.indexOf(field) === -1) {
                            continue
                        }

                        if (item[field].toLowerCase().indexOf(value.toLowerCase()) !== -1) {
                            this.results.push(item)
                            break
                        }
                    }
                }
            },
            onClickOptions() {
                this.showOptions = !this.showOptions || !!this.search
            },
            onSelectOption(item) {
                this.selectedOption = item
                this.search =  item[this.dispalyOption]
                this.results = []
                this.$emit('onSelect', item)
            }
        },
        data() {
            return {
                search: '',
                results: [],
                selectedOption: null,
                showOptions: false
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .searcher
        width: 100%
        height: 35px
        position: relative
        .input-icon
            position: absolute
            top: 14px
            right: 10px
            font-size: 12pt
            color: $app-dark-color
            &:hover
                cursor: pointer
        .search-input
            width: 100%
            height: 100%
            border-radius: 0
            font-size: 12pt
            font-weight: normal
        .dropdown-options
            display: none
            position: absolute
            background: $app-light-color
            border: 1px solid $app-separator-color
            box-shadow: 0 3px 5px $app-separator-color
            z-index: 10
            top: 45px
            left: 0
            right: 0
            bottom: -325px
            padding: 0
            animation-duration: 500ms
            overflow-y: auto
            &.input-show
                display: block
            ul
                li
                    height: 35px
                    display: block
                    text-align: left
                    margin: 10px 0 0 10px
                    font-size: 12pt
                    font-weight: normal
                    border-bottom: 1px solid $app-border-color
                    &:last-child
                        margin-bottom: 10px
                    &:hover
                        border-bottom: 2px solid $app-main-color
                        cursor: pointer
</style>