A simple autocomplete dropdown for React
- A simple & ready-to-use autocomplete component for React.js
- Fast, light-weight and uses minimal DOM elements
- Smart dropdown with mouse and keyboard actions
- Supports case-insensitive search
- Can be easily themed for any host web application
One can use ample-autocomplete directly from a web-page by attaching the ample-autocomplete.js and ample-autocomplete.css to the DOM.
<!-- Attaching the ample-autocomplete stylesheet -->
<link type="text/javascript" rel="stylesheet" href="path/to/library/ample-autocomplete.css" />
<!-- Attaching the ample-autocomplete script -->
<script type="text/javascript" src="path/to/library/ample-autocomplete.js"></script>
<!-- Usage -->
<script type="text/javascript">
var AmpleAutocomplete = ampleAutocomplete,
options = [1, 2, 3];
ReactDOM.render(<AmpleAutocomplete options={options} />, document.getElementById('page'));
</script>
With Webpack, Browserify or RequireJS
Install ample-autocomplete from NPM
npm install ample-autocomplete --save-dev
Consume as an ES6 module
import AutoComplete from 'ample-autocomplete';
Consume as a CommonJS module
var AutoComplete = require('ample-autocomplete');
Consume as an AMD
require(['ample-autocomplete'], function (ampleAutocomplete) {
// Consume ampleAutocomplete
}
In order to use the stylesheet,
Import in your React components as
import from '[relative/path/to]/ample-autocomplete.css';
or in your stylesheet as
@import '[relative/path/to]/ample-autocomplete.css';
You may have to use Babel for ES6 transpilation.
Options can be passed as attributes(props) to the React component on use.
placeholder
- to provide a custom placeholder to the input boxonSelect
- to provide a handler to be run every time a value is selected from the dropdownselectOnEnter
- set totrue
if you want the user to be able to select an option using the Enter keycaseInsensitive
- set totrue
for a case-insensitive search
You can view a demo here.
- Unit tests