React AutoCompleter

A React component which filters on phrases and returns similar results, with a simple API, keyboard navigation and no style hijacking.

npm install react-autocompleter --save

http://invertase.github.io/react-autocompleter/example

Basic Usage

import React, { Component } from 'react';
import AutoCompleter from 'react-autocompleter';
 
const data = [
    'phrase one',
    'phrase two'
];
 
class MyComponent extends Component {
 
    render() {
        return (
            <AutoCompleter
                data={ data }
                placeholder='Search...'
                limit={ 10 }
            />
        );
    }
 
}

Styling

By default this component does not provide any styling, however it gives you the ability to easily style the specific component yourself:

CSS Classes

Pass in an object of class names to the component, and style with your own CSS/LESS/SASS like any other HTML element:

classes={ {
    root: 'autocomplete',
    input: 'autocomplete-input',
    listContainer: 'autocomplete-container',
    listItems: 'autocomplete-items'
} }

Inline Styles

Pass an object on inline styles directly into the component:

styles={ {
    root: {
        padding: '10px'
    },
    input: {
        fontSize: '14px'
    },
    listContainer: {
        listStyleType: 'none',
        background: '#ffffff',
        padding: '20px'
    },
    listItems: {
        padding: '15px',

        '.active': {
            fontSize: '30px'
        }
    }
} }

Component API

placeholder (string)

A string which is injected into the input box as a placeholder.

placeholder='Search...'

data (array|required)

A single dimension array of phrases which are filtered on user input.

data={ [
    'phrase one',
    'phrase two'
] }

limit (number|default:20)

Limit the amount of filtered results returned.

Set to 0 for no limit.

limit={ 10 }

value (string)

The initial/default value on the input.

value='keyword'

keyboard (bool|default:true)

If set to false, keyboard navigation will be disabled.

keyboard={ false }

onSelect (function)

Triggered on item select, either via keyboard navigation (ENTER), or by clicking an item.

onSelect={ (item) => { console.log('selected item ', item) } }

onFocus (function)

Triggered on input box focus.

onFocus={ () => { console.log('input focused') } }

onBlur (function)

Triggered on input box blur.

onBlur={ () => { console.log('input blurred') } }

onChange (function)

Triggered on input change, including the navigated value.

onChange={ (value) => { console.log('input changed to', value) } }

inputProps (object)

An object of properties which will be passed to the input element as attributes:

inputProps={ {
    type: 'password',
    name: 'bon'
} }

Misc

Handling onChange & onSelect

Since clicking a filtered item does not trigger onChange, the item is passed as the callback on the onSelect function. There might be a case where your onSelect function needs to handle both the state value and the callback value:

selected = (value) => {
    const input = !value ? this.state.url : value;
}

Browser Autofill

Browsers like Chrome sometimes autofill input elements if you've added the name attribute something common, like "name" or "url", which overrides this components functionality (annoyingly!). To disabled this, add the following:

inputProps={ {
    autoComplete='off'
} }

Development

Whilst developing, this repository makes use of webpack & webpack hot reloading.

The playground directory is the place to test changes to the component, or play around with the component API. Any changes you make, to either playground or src will be hot reloaded.

Run the script npm run playground, and open http://localhost:3000 in your browser.

Contributing

Please ensure any pull requests have been tested, and follow the linting configuration.

Run npm run lint to spot any linting issues.