react-select-suggest
Adds a suggest-select-box, uses react and redux
Usage
npm install --save react-select-suggest
if you are using Redux
add the reducer :
import { combineReducers } from 'redux';
import { ReactSelectSuggestReducer } from 'react-select-suggest';
const rootReducer = combineReducers({
reactSelectReducer : ReactSelectSuggestReducer()
});
add the component :
import { ReactSelectSuggestRedux } from 'react-select-suggest';
const Demo = () => (
<div>
<ReactSelectSuggestRedux
placeholder="Search..."
url="your_url"
showAttr="your_attribute"
boxHeight="100"
boxWidth="300"/>
</div>
)
if your are NOT using Redux
just add the component :
import { ReactSelectSuggest } from 'react-select-suggest';
const Demo = () => (
<div>
<ReactSelectSuggest
placeholder="Search..."
url="your_url"
showAttr="your_attribute"
boxHeight="100"
boxWidth="300"/>
</div>
)
if you are using Redux and want to add multiple components on the same page
const rootReducer = combineReducers({
your_namespace_1 : ReactSelectSuggestReducer('your_namespace_1'),
your_namespace_2 : ReactSelectSuggestReducer('your_namespace_2')
});
<ReactSelectSuggestRedux
placeholder="Search..."
url="your_url"
showAttr="your_attribute"
boxHeight="100"
boxWidth="300"
namespace="your_namespace_1"/>
<ReactSelectSuggestRedux
placeholder="Search..."
url="your_url"
showAttr="your_attribute"
boxHeight="100"
boxWidth="300"
namespace="your_namespace_2"/>
Options
showAttr : Required - the attribute which contains the data you want to display
url : Optional - is ignored when items is set - the uri which needs to return json data
items : Optional - this needs to be an array of json objects
placeholder : Optional - a string which is the placeholder for the empty input field
boxHeight : Optional - the height of the opening dropdown box, if not specified it is always as high as the results
boxWidth : Optional - the width of the whole component, if not specified it is as width as the parent div
freeTextSelection : Optional boolean - if false you can't select a value which is not in the provided list
onSelectedChanged : Optional - change handler function which returns the selected value