React simple typeahead

React simple typeahead is a react based typeahead(autocomplete) component.

$3

- Simple demo

$3

``
npm install react-simple-typeahead
`
If you are using npm and CommonJS modules you simply require react-simple-typeahead:
`
var Typehead = require('react-simple-typeahead');
`
or you can load react-simple-typeahead.js file from dist folder.

$3

`
options={['Red', 'Green', 'Yellow', 'Blue']}
onOptionSelected={function(option) { console.log("Option selected:", option)}}
maxOptionsCount={4}
placeholder="Type color here"
customClasses={{
input: 's-typeahead-input',
list: 's-typeahead-list',
listItem: 's-typeahead-list-item',
listItemSelected: 's-typeahead-list-item--selected'
}}
/>
`

$3

Component properties:

defaultValue
Type: String
Default: ""
Default value will be shown when no option selected

placeholder
Type: String
Default: ""
Placeholder text for the input field

options
Type: Array
Default: []
List of options available for selection

onOptionSelected
Type: Function
Default: none
Callback function which will be called on each option selection by user, function will receive as parameter an option

onInputEmpty
Type: Function
Default: none
Callback function which will be called once the input of component get empty

maxOptionsCount
Type: Number
Default: -1
Limit number of suggested options to show. By default there is no limit

customClasses
Type: Object
Default:
`
wrapper: 'ss-typeahead-wrapper',
input: 'ss-typeahead-input',
list: 'ss-typeahead-list',
listItem: 'ss-typeahead-list-item',
listItemSelected: 'ss-typeahead-list-item--selected',
listItemValue: 'ss-typeahead-list-item__value'
`
Object of CSS class names to apply to the component.
Possible property names:
- wrapper: reference to the class property of wrapping div of the component
- input: reference to the class property of input element
- list: reference to the class property of ul element
- listItem: refernce to the class property of li element
- listItemSelected: refernce to the class property of li element in selected state
- listItemValue: refernce to the class property of span` element which used for displaying an option