kompletr
JS autocompletion library - Kømpletr
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
Install package
npm i kompletr --save
Import module
import kompletr from 'kompletr'
Get CSS from ./node_modules/kompletr/css/kompletr.min.css
Direct download
- Download latest release archive
- Get JS from [Your-vendors-path]/kompletr/js/kompletr.min.js
- Get CSS from [Your-vendors-path]/kompletr/css/kompletr.min.css
Import script and stylesheet
...
<link href="kompletr.min.css" rel="stylesheet" type="text/css" />
<script src="kompletr.min.js" type="module"></script>
...
Getting started
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