Yet Another Autocomplete 🙅♂️
This is the simplest possible autocomplete implementation. It handles just few things for you:
- draws the suggestions box
- allows keyboard navigation between items
- selects item by
Enter
or by clicking it - closes the dialog on
Escape
keypress - debounces input events a little bit
- caches results
All the rest you can do on your own 😉
Installation
yarn add yet-another-autocomplete
Usage
// Optionally require basic simple styles for the dialog.// You can skip this step and just write your own styles in a way you like. const items = 'Apple' 'Banana' const autocomplete = thisel { // Filter results based on `term`. // You can also do AJAX requests and set results asynchronously. // Call the `setter` with an array of `{text, value}` objects. const results = items } { // You receive a selected result in the same `{text, value}` form. // Do something with the selected value here... } disableCaching: true // By default caching results by term is enabled, and can be disabled by this flag // Destroy when not needed anymore.// This will remove an autocomplete box from the DOM and unassign all related event listeners. autocomplete