a very minimal autocomplete typeahead autosuggestion select list highlighter
try the demo
- 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.
Listens to an input for arrow up, arrow down, tab and enter
- Upon arrowing a highlighting class is applied to the current item
- On
tabthe highlighted item'sinnerTextis applied to theinput.value Enterdoes the same thing astab
- Create your own, additional, event handlers for
tabandenteroutside the scope of mincomplete (e.g. fetch data from a server when hittingenter). - Fork mincomplete and make it your own.
- Use Distiller to grab the dist file(s) and modify them for your custom use case.
$ npm install mincomplete// ...
<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>
// ...ISC © Buster Collings