kompletr
JS autocompletion library - Kømpletr
10kb of vanilla lightweight for a simple & efficient autocomplete
Features
- :white_check_mark: Sync / async querying
- :white_check_mark: Cache management
- :white_check_mark: Keyboard navigation
- :white_check_mark: Flexible research (begining, whole word or … on your own)
- :white_check_mark: Flexible suggestions display (1, 2, 3, … fields)
- :white_check_mark: Support string or object values
- :white_check_mark: No dependencies
- :white_check_mark: 10kb fully included
Installation
Package manager
$ npm i kompletr --save
Direct download
- Download latest release archive
- Get JS files from ./dist/js/.js*
- Get CSS files from ./dist/css/.css*
Getting started
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);
}
});
Options
- 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