Features
- Basic HTML select functionality, including multiple
- Search/filter options
- Custom option rendering
- Keyboard support
- Group options with group names, you can search group names
- Events for everything
- Fully stylable
Demo
Live demo can be found here: http://tbleckert.github.io/react-select-search/
Known issues
- Weird tab behaviour in some places in Safari
How to use
Install it with npm (npm install react-select-search --save
) and import it like you normally would.
/** * The options array should contain objects. * Required keys are "name" and "value" but you can have and use any number of key/value pairs. */const options = name: 'Swedish' value: 'sv' name: 'English' value: 'en' type: 'group' name: 'Group name' items: name: 'Spanish' value: 'es' ; /* Simple example */<SelectSearch options=options value="sv" name="language" placeholder="Choose your language" />
Below is a full list of properties and defaults (displayed in React style).
options: PropTypesarrayisRequired className: PropTypesstring search: PropTypesbool placeholder: PropTypesstring multiple: PropTypesbool height: PropTypesnumber autoComplete: PropTypes name: PropTypesstring autofocus: PropTypesbool fuse: PropTypesobject onChange: PropTypesfunc onHighlight: PropTypesfunc onMount: PropTypesfunc onBlur: PropTypesfunc onFocus: PropTypesfunc renderOption: PropTypesfunc renderValue: PropTypesfunc renderGroupHeader: PropTypesfunc value: PropTypes className: 'select-search-box' search: true value: '' placeholder: null multiple: false height: 200 autoComplete: 'on' name: null autofocus: false {} {} {} {} {} optionname label name fuse: keys: 'name' threshold: 03
The height property is the minimum height (max is the remaining space below the selectbox down to the browser window end) of the dropdown if multiple is false, otherwise it's the fixed height.
For examples you can take a look at the bootstrap.js file on the gh-pages branch.
You will also need some CSS to make it look right. Example theme can be found in style.css