Skip to content

10kb of vanilla lightweight for a simple & efficient autocomplete.

License

Notifications You must be signed in to change notification settings

steve-lebleu/kompletr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JS autocompletion library - Kømpletr

Logo Kømpletr light Logo Kømpletr dark

10kb of vanilla lightweight for a simple & efficient autocomplete

Github action workflow status GitHub Release CodeFactor Coverage Status GPL Licence JsDelivr Statistics

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