WAI-ARIA compliant React autosuggest component.
npm install react-autosuggest --saveimport Autosuggest from 'react-autosuggest';
let suburbs = ['Cheltenham', 'Mill Park', 'Mordialloc', 'Nunawading'];
function getSuggestions(input, callback) {
let regex = new RegExp('^' + input, 'i');
setTimeout(function() {
callback(null, suburbs.filter( suburb => regex.test(suburb) ));
}, 300);
}<Autosuggest suggestions={getSuggestions} />Implement this function to tell Autosuggest which suggestions to display.
function(input, callback) {
...
}-
input- Will be the value of the input field -
callback- Should be called once the suggestions are in hand, or error occurs.- Success example:
callback(null,<suggestions>) - Error example:
callback(new Error("Couldn't get locations"))
- Success example:
<suggestions> can have one of the following two formats:
- To display a single section with no title:
[<suggestion>,<suggestion>, ...] - To display one or more sections with optional titles: Array of objects with an optional
sectionNameand a mandatorysuggestionskeys, e.g.:
[{
suggestions: [<suggestion>, <suggestion>] // This section won't have a title
}, {
sectionName: 'Second section',
suggestions: [<suggestion>, <suggestion>, <suggestion>]
}]
<suggestion> can have one of the following two formats:
- String, e.g.:
'Mentone' - Object, e.g.:
{ suburb: 'Mentone', postcode: '3194' }. This object cannot have asuggestionskey. You must implementsuggestionRendererandsuggestionValuein this case.
This function will be used to render the suggestion. It should return ReactElement or a string.
function(suggestion, input) {
...
}suggestion- The suggestion to render (string or object)input- The value of the input field (e.g.:'Men'). If user interacts using the Up or Down keys at the moment, it will be the value of the input field prior to those interactions.
For example:
function renderSuggestion(suggestion, input) { // In this example 'suggestion' is a string
return (
<span><strong>{suggestion.slice(0, input.length)}</strong>{suggestion.slice(input.length)}</span>
);
}<Autosuggest suggestions={getSuggestions}
suggestionRenderer={renderSuggestion} />This function will be used to set the value of the input field when suggestion is selected. It has one parameter which is the suggestion object. This function is ignored when suggestions are strings.
For example:
function getSuggestionValue(suggestionObj) {
return suggestionObj.suburb + ' VIC ' + suggestionObj.postcode;
}<Autosuggest suggestions={getSuggestions}
suggestionRenderer={renderSuggestion}
suggestionValue={getSuggestionValue} />This function will be used to determine whether to show suggestions or not. It has one parameter which is the value of the input field (e.g.: 'm '). The default is:
function(input) {
return input.trim().length > 0;
}For example, to show suggestions only if user typed 2 or more characters, do:
function showWhen(input) {
return input.trim().length >= 2;
}<Autosuggest suggestions={getSuggestions}
showWhen={showWhen} />This function will be called when suggestion is selected via mouse click or Enter. It has one parameter which is the selected suggestion (string or object).
For example:
function onSuggestionSelected(suggestion) { // In this example 'suggestion' is a string
console.log('Suggestion selected: [' + suggestion + ']');
}<Autosuggest suggestions={getSuggestions}
onSuggestionSelected={onSuggestionSelected} />Hash of attributes to pass to the input field. For example:
let inputAttributes = {
id: 'locations-autosuggest',
name: 'locations-autosuggest',
className: 'my-sweet-locations-autosuggest',
placeholder: 'Enter locations...',
value: 'Mordialloc' // Initial value
};<label htmlFor="locations-autosuggest">Where</label>
<Autosuggest suggestions={getSuggestions}
inputAttributes={inputAttributes} />The <Autosuggest /> component comes with no styles. You can use the following classes to style it:
react-autosuggestreact-autosuggest__suggestionsreact-autosuggest__suggestionreact-autosuggest__suggestions-sectionreact-autosuggest__suggestions-section-namereact-autosuggest__suggestions-section-suggestions
An example can be found in examples/src/Autosuggest.less
The following diagrams explain the classes above.
+---| react-autosuggest |-------------------------+
| |
| <input> |
| |
| +--| react-autosuggest__suggestions |-------+ |
| | | |
| | +--| react-autosuggest__suggestion |--+ | |
| | | | | |
| | +-------------------------------------+ | |
| | | |
| +-------------------------------------------+ |
| |
+-------------------------------------------------+
+---| react-autosuggest |----------------------------------------------------+
| |
| <input> |
| |
| +--| react-autosuggest__suggestions |----------------------------------+ |
| | | |
| | +--| react-autosuggest__suggestions-section |--------------------+ | |
| | | | | |
| | | +--| react-autosuggest__suggestions-section-name |---------+ | | |
| | | | | | | |
| | | +----------------------------------------------------------+ | | |
| | | | | |
| | | +--| react-autosuggest__suggestions-section-suggestions |--+ | | |
| | | | | | | |
| | | | +--| react-autosuggest__suggestion |-----------------+ | | | |
| | | | | | | | | |
| | | | +----------------------------------------------------+ | | | |
| | | | | | | |
| | | +----------------------------------------------------------+ | | |
| | | | | |
| | +----------------------------------------------------------------+ | |
| | | |
| +----------------------------------------------------------------------+ |
| |
+----------------------------------------------------------------------------+
npm startNow, open http://localhost:3000/examples/dist/index.html
npm test