https://github.com/busterc/mincomplete
:arrow_up_down: a very minimal autocomplete typeahead autosuggestion select list highlighter
https://github.com/busterc/mincomplete
autocomplete autoselect autosuggest typeahead
Last synced: about 1 month ago
JSON representation
:arrow_up_down: a very minimal autocomplete typeahead autosuggestion select list highlighter
- Host: GitHub
- URL: https://github.com/busterc/mincomplete
- Owner: busterc
- License: isc
- Created: 2017-10-26T19:58:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-09T20:22:35.000Z (almost 8 years ago)
- Last Synced: 2025-03-18T08:14:57.311Z (about 1 year ago)
- Topics: autocomplete, autoselect, autosuggest, typeahead
- Language: HTML
- Size: 20.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mincomplete [![NPM version][npm-image]][npm-url]
> a very minimal autocomplete typeahead autosuggestion select list highlighter
### try the [demo](https://rawgit.com/busterc/mincomplete/master/test/index.html)
## What it doesn't do
- Populate or significantly modify DOM Element that contains a list of suggestions; forcing you to used a baked in filtering algorithm (e.g. fuzzy) and/or presentation format.
- Provide every possible capability you could ever dream up for such a feature, sticking you with a whole lot of code that you'll never use.
## What it does
Listens to an input for `arrow up`, `arrow down`, `tab` and `enter`
- Upon arrowing a highlighting class is applied to the current item
- On `tab` the highlighted item's `innerText` is applied to the `input.value`
- `Enter` does the same thing as `tab`
## What if you need a bit more functionality
- Create your own, additional, event handlers for `tab` and `enter` outside the scope of mincomplete (e.g. fetch data from a server when hitting `enter`).
- [**Fork mincomplete**](https://github.com/busterc/mincomplete) and make it your own.
- Use [**Distiller**](https://github.com/busterc/distiller) to grab the dist file(s) and modify them for your custom use case.
## Install
```sh
$ npm install mincomplete
```
## Usage
```html
// ...
.highlighted { background-color: yellow; }
// so easy a caveman can do it
mincomplete({
input: document.querySelector('#search'),
suggestions: document.querySelector('#suggestions'),
highlightedClass: 'highlighted'
});
// ...
```
## License
ISC © [Buster Collings](http://about.me/buster)
[npm-image]: https://badge.fury.io/js/mincomplete.svg
[npm-url]: https://npmjs.org/package/mincomplete