React-Tag-Suggest

[![SemVer]](http://semver.org)
[![License]](https://github.com/tjunghans/react-tag-suggest/blob/master/LICENCE)

An auto suggest react component that displays an input field for queries. With
each change of the query the suggester is fired and matching results displayed
in a dropdown.

(The styling and functionality is still a bit raw in some places.)

Demo

Install

Install as node dependency:

``
npm install react-tag-suggest --save
`

Quickstart

To test locally change to node_modules/react-tag-suggest and run:

`
npm start & npm run watch
`

Commands

- npm run build - build production css and js
- npm run watch - compile css and js
- npm run watch:test - run tests on change
- npm start - start static dev server
- npm test - run lint and tests

Usage

`javascript
var React = require('react');
var tagSuggestComponent = require('react-tag-suggest');

// DEV START
var items = ['Java', 'Java Flash', 'JavaScript', 'Html', 'Java Script',
'css', 'photoshop', 'project management', 'sales', 'photography',
'football', 'dj', 'video editing', 'mac os x', 'Adobe Photoshop'];

function findSuggestions(query, callback) {
// Some async action will happen here
var res;
if (!query || query.length < 2) {
callback(null, []);
return;
}

res = items.filter(function (item) {
return item.toLowerCase().indexOf(query.toLowerCase().trim()) > -1;
});

callback(null, res);
}
// DEV END

var tagInput = React.render(React.createElement(tagSuggestComponent, {
suggester: findSuggestions
}),
document.querySelector('#content'));

`

Component Props

- suggester: function with two arguments:
- query: search query
- callback: function with two arguments, error and result.

The suggester would perform an async http request (ajax) and receive a result
which it passes back to the component via the callback.
- cssClass`: optional css class

License

MIT

[SemVer]: http://img.shields.io/:semver-%E2%9C%93-brightgreen.svg
[License]: https://img.shields.io/github/license/mashape/apistatus.svg