ample-autocomplete

A simple autocomplete dropdown for React

Features

• 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

How to Use

Directly from a web page

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

Options can be passed as attributes(props) to the React component on use.

• placeholder - to provide a custom placeholder to the input box
• onSelect - to provide a handler to be run every time a value is selected from the dropdown
• selectOnEnter - set to true if you want the user to be able to select an option using the Enter key
• caseInsensitive - set to true for a case-insensitive search

Demo

You can view a demo here.

To-do

• Unit tests