0.0.2 • Published 6 years ago
react-autocomplete-widget v0.0.2
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-widgetGetting started
First, include autocomplete styles in your project:
node_modules/react-autocomplete-widget/dist/autocomplete.cssand 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