vue_common_components/Searcher.vue

<template lang="pug">
    input.searcher(type='search' :placeholder='placeholder' :style='{ width, height }' v-model='search')
</template>

<script>
    import Fuse from 'fuse.js'

    export default {
        props: {
            items: {
                type: Array,
                default: [],
                required: true
            },
            placeholder: {
                type: String,
                default: 'Buscar...'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '35px'
            },
            shouldSort: {
                type: Boolean,
                default: true
            },
            threshold: {
                type: Number,
                default: 0.4,
            },
            location: {
                type: Number,
                default: 0
            },
            distance: {
                type: Number,
                default: 100
            },
            maxPatternLength: {
                type: Number,
                default: 32
            },
            minMatchCharLength: {
                type: Number,
                default: 1
            },
            keys: {
                type: Array,
                default: [],
                required: true
            }
        },
        watch: {
            items(values) {
                this.fuse.setCollection(values)
            },
            search(value) {
                this.performSearch(value.trim())
            },
            results(values) {
                this.$emit('onSearch', values)
            }
        },
        methods: {
            initFuse() {
                this.fuse = new Fuse(this.items, {
                    shouldSort: this.shouldSort,
                    threshold: this.threshold,
                    location: this.location,
                    distance: this.distance,
                    maxPatternLength: this.maxPatternLength,
                    minMatchCharLength: this.minMatchCharLength,
                    keys: this.keys
                })
            },
            performSearch(value) {
                this.results = this.fuse.search(value)
            }
        },
        data() {
            return {
                fuse: null,
                search: '',
                results: []
            }
        },
        mounted() {
            this.initFuse()
        }
    }
</script>

<style lang="sass">
    .searcher
        text-align: center
        border-radius: 0 !important
        font:
            size: 11pt
            style: normal
            weight: bold
</style>