kompletr

JS autocompletion library - Kømpletr

10kb of vanilla lightweight for a simple & efficient autocomplete

Features

• ✅ 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

Installation

Package manager

$ npm i kompletr --save

Direct download

1. Download latest release archive
2. Get JS files from ./dist/js/.js*
3. 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

Licence

GPL