full text search example
import React from 'react';
import { Link } from 'gatsby'
export default class SearchBar extends React.Component {
state = {
query: '',
results: [],
}
render() {
return (
<div className={this.props.classNames+" search__parent__div flex-md"}>
<input className='search__input' type='text' value={this.state.query} onChange={this.search} placeholder={'Search'} aria-label="Search" />
{ // Results list
(this.state.results.length > 0) && ( // Only show when there are results
<div className='search__list'>
<span>Search results</span>
<ul>
{this.state.results.map((page) => (
<li key={page.url}>
<Link className='search__list_white search__list_non-decoration'
to={page.url}>
{page.title}
</Link>
</li>
))}
</ul>
</div>
) }
</div>
)
}
getSearchResults(query) {
if (!query || !window.__LUNR__) return []
const lunrIndex = window.__LUNR__[this.props.lng];
const results = lunrIndex.index.search(query) // you can customize your search , see https://lunrjs.com/guides/searching.html
return results.map(({ ref }) => lunrIndex.store[ref])
}
search = event => {
const query = event.target.value
const results = this.getSearchResults(query)
this.setState({ results, query })
}
}
Last updated