![travis](https://travis-ci.com/sickdyd/react-search-autocomplete.svg?branch=master)
<ReactSearchAutocomplete>
A <ReactSearchAutocomplete>
is a fully customizable search box where the user can type text and filter the results. It relies on Fuse.js v6.4.4 for the fuzzy search. Check out their website to see the options (you can pass them to this component).
Click here to see a demo.
Demo source.
Multiple search boxes on the same website
If you are using multiple search boxes set useCaching
to false
(default is false
); the implementation for multiple cached search boxes is work in progress.
Installing
$ npm install react-search-autocomplete
With React 17
$ npm install react-search-autocomplete --legacy-peer-deps
Exports
The default export is <ReactSearchAutocomplete>
.
To use it:
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
React Search Autocomplete Usage
import React from 'react'
import './App.css'
import { ReactSearchAutocomplete } from 'react-search-autocomplete'
function App() {
const items = [
{
id: 0,
name: 'Cobol'
},
{
id: 1,
name: 'JavaScript'
},
{
id: 2,
name: 'Basic'
},
{
id: 3,
name: 'PHP'
},
{
id: 4,
name: 'Java'
}
]
const handleOnSearch = (string, results) => {
console.log(string, results)
}
const handleOnSelect = (item) => {
console.log(item)
}
const handleOnFocus = () => {
console.log('Focused')
}
return (
<div className="App">
<header className="App-header">
<div style={{ width: 400 }}>
<ReactSearchAutocomplete
items={items}
onSearch={handleOnSearch}
onSelect={handleOnSelect}
onFocus={handleOnFocus}
autoFocus
/>
</div>
</header>
</div>
)
}
export default App
<ReactSearchAutocomplete>
Props:
{
items,
fuseOptions,
resultStringKeyName,
inputDebounce,
onSearch,
onSelect,
onFocus,
showIcon,
maxResults,
placeholder,
autoFocus,
styling
}
License
MIT