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

    Install

    npm i mincomplete

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    ISC

    Last publish

    Collaborators

    • buster