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: 21 days 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-09T20:22:35.000Z (over 6 years ago)
• Last Synced: 2024-11-19T20:07:34.719Z (about 1 month ago)
• Topics: autocomplete, autoselect, autosuggest, typeahead
• Language: HTML
• Size: 20.5 KB
• Stars: 2
• Watchers: 3
• 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)

![](https://i.imgur.com/Krcvl6j.gif)

## 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