u-fit/frontend/components/search.js

import fuse from 'fuse.js'

const dummyResults = [{
    title: 'good :-)',
    text: 'a good text.',
    link: 'good'
}, {
    title: 'bad :-(',
    text: 'a bad text.',
    link: 'bad'
}]

class Search extends React.Component {
    state = {
        active: false,
        query: '',
        results: []
    }

    focus = ev => {
        this.setState({ active: true })
    }

    blur = ev => {
        this.setState({ active: false })
    }

    change = ev => {
        const { value } = ev.target
        this.setState({ query: ev.target.value })
        const fuseOptions = {
            shouldSort: true,
            includeMatches: true,
            threshold: 0.3,
            location: true,
            keys: ['title', 'text', 'link']
        }
        const fuseInst = new fuse(dummyResults, fuseOptions)
        const searchResults = fuseInst.search(value)
        console.log(dummyResults, searchResults)
        if (value) {
            this.setState({
                results: searchResults
            })
        } else {
            this.setState({ results: [] })
        }
    }

    render() {
        return (
            <>
                <div id='searchbar'>
                    <input
                        type="text"
                        placeholder="Search.."
                        onFocus={this.focus}
                        onBlur={this.blur}
                        onChange={this.change}
                    />
                    <button type="submit">Search</button>
                    {(this.state.active && this.state.query) && (this.state.results ?
                        (
                            <ul id='searchresults'>
                                {this.state.results.map(result => <Result key={result.title} {...result} />)}
                            </ul>
                        ) : (
                            <p>Nothing found.</p>
                        )
                    )}
                </div>

                <style jsx>
                    {`
                        input[type=text] {
                            float: right;
                            padding: 6px;
                            border: none;
                            margin-top: 8px;
                            margin-right: 16px;
                            font-size: 17px;
                        }
                        `}
                </style>
            </>
        )
    }
}

const Result = props => {
    const { item, matches } = props
    return (
        <li>
            <a href={item.link}>
                <h3>{item.title}</h3>
                <p>{item.text}</p>
            </a>
        </li>
    )
}

export default Search