React AutoCompleter
A React component which filters on phrases and returns similar results, with a simple API, keyboard navigation and no style hijacking.
npm install react-autocompleter --save
http://invertase.github.io/react-autocompleter/example
Basic Usage
;; const data = 'phrase one' 'phrase two'; { return <AutoCompleter data= data placeholder='Search...' limit= 10 /> ; }
Styling
By default this component does not provide any styling, however it gives you the ability to easily style the specific component yourself:
CSS Classes
Pass in an object of class names to the component, and style with your own CSS/LESS/SASS like any other HTML element:
classes={ {
root: 'autocomplete',
input: 'autocomplete-input',
listContainer: 'autocomplete-container',
listItems: 'autocomplete-items'
} }
Inline Styles
Pass an object on inline styles directly into the component:
styles={ {
root: {
padding: '10px'
},
input: {
fontSize: '14px'
},
listContainer: {
listStyleType: 'none',
background: '#ffffff',
padding: '20px'
},
listItems: {
padding: '15px',
'.active': {
fontSize: '30px'
}
}
} }
Component API
placeholder (string)
A string which is injected into the input box as a placeholder.
placeholder='Search...'
data (array|required)
A single dimension array of phrases which are filtered on user input.
data={ [
'phrase one',
'phrase two'
] }
limit (number|default:20)
Limit the amount of filtered results returned.
Set to 0
for no limit.
limit={ 10 }
value (string)
The initial/default value on the input.
value='keyword'
keyboard (bool|default:true)
If set to false, keyboard navigation will be disabled.
keyboard={ false }
onSelect (function)
Triggered on item select, either via keyboard navigation (ENTER), or by clicking an item.
onSelect={ (item) => { console.log('selected item ', item) } }
onFocus (function)
Triggered on input box focus.
onFocus={ () => { console.log('input focused') } }
onBlur (function)
Triggered on input box blur.
onBlur={ () => { console.log('input blurred') } }
onChange (function)
Triggered on input change, including the navigated value.
onChange={ (value) => { console.log('input changed to', value) } }
inputProps (object)
An object of properties which will be passed to the input element as attributes:
inputProps={ {
type: 'password',
name: 'bon'
} }
Misc
onChange
& onSelect
Handling Since clicking a filtered item does not trigger onChange
, the item is passed as the callback on the onSelect
function. There might be a case where your onSelect
function needs to handle both the state value and the callback value:
selected = (value) => {
const input = !value ? this.state.url : value;
}
Browser Autofill
Browsers like Chrome sometimes autofill input elements if you've added the name attribute something common, like "name" or "url", which overrides this components functionality (annoyingly!). To disabled this, add the following:
inputProps={ {
autoComplete='off'
} }
Development
Whilst developing, this repository makes use of webpack & webpack hot reloading.
The playground
directory is the place to test changes to the component, or play around with the component API. Any changes you make, to either playground
or src
will be hot reloaded.
Run the script npm run playground
, and open http://localhost:3000 in your browser.
Contributing
Please ensure any pull requests have been tested, and follow the linting configuration.
Run npm run lint
to spot any linting issues.