10kb of vanilla lightweight for a simple & efficient autocomplete
- ✅ Sync / async querying
- ✅ Cache management
- ✅ Keyboard navigation
- ✅ Flexible research (begining, whole word or ... on your own)
- ✅ Flexible suggestions display (1, 2, 3, ... fields)
- ✅ Support string or object values
- ✅ No dependencies
- ✅ 10kb fully included
$ npm i kompletr --save- Download latest release archive
- Get JS files from ./dist/js/.js*
- Get CSS files from ./dist/css/.css*
Load Kømpletr assets:
...
<link href="kompletr.min.css" rel="stylesheet" type="text/css" />
<script src="kompletr.min.js" type="module"></script>
...Define input element:
<input type="text" id="auto-complete" autocomplete="off" placeholder="Whatever you want..." />Invoke Kømpletr:
kompletr({
input: 'auto-complete',
data: [],
onSelect: (selected) => {
console.log('There is the selected value', selected);
}
});- fieldsToDisplay: string[], properties to display in the suggestion field when suggestions are Objects
- mapPropertyAsValue: string, property to map as input value when the suggestions are Objects
- filterOn: string, check expression from beginning of the value or on the whole word. Default 'prefix'
- startQueryingFromChar: int, number of chars completed in input before kompletr fire search
- maxResults: int, number of max results to display
- onKeyup: function(value), callback fired each time the user press a keyboard touch
- onSelect: function(selected), callback fired after selection of on result item
- onError: function(error), callback fired when an error occurs