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
            },
            mode: {
                type: String,
                default: 'fuzzy'
            }
        },
        watch: {
            items(values) {
                if (this.mode !== 'fuzzy') {
                    return
                }

                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) {
                if(!value) {
                    this.results = []
                    return
                }

                if (this.mode === 'fuzzy') {
                    this.results = this.fuse.search(value)
                } else {
                    this.results = []

                    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
                            }
                        }
                    }
                }
            }
        },
        data() {
            return {
                fuse: null,
                search: '',
                results: []
            }
        },
        mounted() {
            if (this.mode !== 'fuzzy') {
                return
            }
            
            this.initFuse()
        }
    }
</script>

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