![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).
Latest changes
4.0.0
- Removed global styles for font-size, font-family and border-box (now applied only to the component)
3.0.1
3.0.0
onSearch
will have as the first argument of the callback the keyword
searched and for the second the results
onSearch
results
now will be []
instead of false
if there are no cached results or results- Greatly improved performance with large amount of items
2.0.4
- Support for different
items
structure is now properly working useCaching
is now by default set to false
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.
Click here to see a demo.
Demo source.
Installing
$ npm install react-search-autocomplete
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,
useCaching,
inputDebounce,
onSearch,
onSelect,
onFocus,
showIcon,
maxResults,
placeholder,
autoFocus,
styling
}
License
MIT