A typeahead/autocomplete component for React
react-typeahead is a javascript library that provides a react-based typeahead, or autocomplete text entry, as well as a "typeahead tokenizer", a typeahead that allows you to select multiple results.
For a typeahead input:
var Typeahead = require('react-typeahead').Typeahead;
React.renderComponent(Typeahead({
options: ['John', 'Paul', 'George', 'Ringo'],
maxVisible: 2
});For a tokenizer typeahead input:
var Tokenizer = require('react-typeahead').Tokenizer;
React.renderComponent(Typeahead({
options: ['John', 'Paul', 'George', 'Ringo'],
onTokenAdd: function(token) {
console.log('token added: ', token);
}
});- Basic Typeahead with Topcoat
- Typeahead Tokenizer with Topcoat
- Typeahead Tokenizer with simple styling
Type: React Component
Basic typeahead input and results list.
Type: Array
Default: []
An array supplied to the fuzzy search.
Type: Number
Limit the number of options rendered in the results list.
Type: Object
Allowed Keys: input, results, listItem, listAnchor
An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits.
Type: String
Placeholder text for the typeahead input.
Type: Function
Event handler for the keyDown event on the typeahead input.
Type: Function
Event handler triggered whenever a user picks an option
Type: React Component
Typeahead component that allows for multiple options to be selected.
Type: Array
Default: []
An array supplied to the fuzzy search.
Type: Number
Limit the number of options rendered in the results list.
Type: Object
Allowed Keys: input, results, listItem, listAnchor, typeahead
An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits.
Type: String
Placeholder text for the typeahead input.
Type: Array
A set of values of tokens to be loaded on first render.
Type: Function
Event handler triggered whenever a token is removed.
Type: Function
Event handler triggered whenever a token is removed.