React-Tag-Suggest
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.)
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 jsnpm run watch
- compile css and jsnpm run watch:test
- run tests on changenpm start
- start static dev servernpm test
- run lint and tests
Usage
var React = ;var tagSuggestComponent = ; // DEV STARTvar items = 'Java' 'Java Flash' 'JavaScript' 'Html' 'Java Script' 'css' 'photoshop' 'project management' 'sales' 'photography' 'football' 'dj' 'video editing' 'mac os x' 'Adobe Photoshop'; { // Some async action will happen here var res; if !query || querylength < 2 ; return; res = items; ;}// DEV END var tagInput = React;
Component Props
-
suggester
: function with two arguments:query
: search querycallback
: 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