mincomplete

1.0.2 • Public • Published

mincomplete NPM version

a very minimal autocomplete typeahead autosuggestion select list highlighter

try the demo

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 and make it your own.
  • Use Distiller to grab the dist file(s) and modify them for your custom use case.

Install

$ npm install mincomplete

Usage

// ...
 
  <style>.highlighted { background-color: yellow; }</style> 
 
</head>
<body>
 
  <div>
    <input id="search" type="text">
    <div id="suggestions"></div>
  </div>
 
  <script>
    // so easy a caveman can do it
    mincomplete({
      input: document.querySelector('#search'),
      suggestions: document.querySelector('#suggestions'),
      highlightedClass: 'highlighted'
    });
  </script> 
 
// ...

License

ISC © Buster Collings

Package Sidebar

Install

npm i mincomplete

Weekly Downloads

0

Version

1.0.2

License

ISC

Last publish

Collaborators

  • buster