react-autocomplete-widget

0.0.2 • Public • Published

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:

License

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

Package Sidebar

Install

npm i react-autocomplete-widget

Weekly Downloads

1

Version

0.0.2

License

MIT

Last publish

Collaborators

  • beslisbeth