React-Autocomplete-Widget

A lightweight react autocomplete widget with an option of showing results in a handy ListView. Uses no extra stylesheets or dependencies.

Demo

You can see a live demo here. Results of selecting or deleting an option will be shown in browser's console.

Install

npm install react-autocomplete-widget

Getting started

First, include autocomplete styles in your project:

node_modules/react-autocomplete-widget/dist/autocomplete.css

and autocomplete widget itself:

import Autocomplete from 'react-autocomplete-widget';

Usage example

An example of autocomplete usage if there is a needed of searching for different types of coffee.

        <Autocomplete
            defaultResults={['Americano', 'Caffé Latte', 'Cappuccino', 'Espresso']}
            id='coffee'
            maxCount={5}
            onDelete={deleted => console.log('Deleted: ' + deleted)}
            onInput={typedCoffee => getTypesOfCoffee(typedCoffee)}
            onSelect={selected => console.log('Selected: ' + selected)}
            placeholder='Type any type of coffee'
            repeatOptions={false}
            showResultsList
        />

For more examples and usage, please refer to the folder "docs"

Props

| Prop | Type | Required | Description | | :-------------: | :-------: | :------: | ----------------------------------------- | | defaultResults | Array | - | The results which will be shown when prop showResultsList={true}. | | id | Any | ✓ | Very important when a couple of autocomplete widgets are on the same page. | | maxCount | Number | - | An amount of options in the list of suggestions. | | onDelete | Function | - | Will be called every time result is deleted via the "x" button (if results are shown. Returns deleted option. | | onInput | Function | - | Takes a promise with an array of suggestions. | | onSelect | Function | - | Will be called every time option is selected or typed in autocomplete. Returns selected option. | | placeholder | String | - | Placeholder for displaying in input An options which are shown in the resultsListView can be not repeated in the suggestions.| | showResultsList | Bool | - | ListView of results can be hided. |

Testing

Will be added soon.

Built with

Project has such peer dependencies:

• [email protected]
• [email protected]
• [email protected]

License

This project is licensed under the MIT License - see the LICENSE file for details