<ReactSearchAutocomplete>
A <ReactSearchAutocomplete>
is a fully customizable search box where the user can type text and filter the results.
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, cached) => {
console.log(string, cached)
}
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,
useCaching,
inputDebounce,
onSearch,
onSelect,
onFocus,
showIcon,
maxResults,
placeholder,
autoFocus,
styling
}
License
MIT