Package Exports

react-autosuggest

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-autosuggest) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Autosuggest

WAI-ARIA compliant React autosuggest component.

Installation

npm install react-autosuggest --save

Usage

var Autosuggest = require('react-autosuggest');

var suburbs = ['Cheltenham', 'Mill Park', 'Mordialloc', 'Nunawading'];

function getSuburbs(input, callback) {
  var regex = new RegExp('^' + input, 'i');

  setTimeout(function() {
    callback(null, suburbs.filter(function(suburb) {
      return regex.test(suburb);
    }));
  }, 300);
}

<Autosuggest suggestions={getSuburbs} />

Options

initialValue (optional)

Specifies the initial value of the input field. Defaults to ''. For example:

<Autosuggest initialValue={'Mordialloc'} suggestions={getSuburbs} />

suggestions

Function to get the suggestions.

function(input, callback) {
  ...
}

input - The value of the input field
callback - Should be called once the suggestions are in hand, or error occurs.
- Success example: callback(null, ['Mentone', 'Mentone East'])
- Error example: callback(new Error("Couldn't get locations"))

Styling

The <Autosuggest /> component comes with no styles. You can use the following classes to style it:

react-autosuggest - Component's wrapper. It includes both the input field and the suggestions list.
react-autosuggest__suggestions - Suggestions list wrapper
react-autosuggest__suggestion - Single suggestion wrapper

Example: examples/src/Autosuggest.less

Development

npm start

Now, open http://localhost:3000/examples/dist/index.html

License

MIT