https://github.com/steve-lebleu/kompletr
10kb of vanilla lightweight for a simple & efficient autocomplete.
https://github.com/steve-lebleu/kompletr
auto-complete auto-completion autocomplete autocompletion esm esmodules javascript library
Last synced: 5 months ago
JSON representation
10kb of vanilla lightweight for a simple & efficient autocomplete.
- Host: GitHub
- URL: https://github.com/steve-lebleu/kompletr
- Owner: steve-lebleu
- License: gpl-3.0
- Created: 2016-05-05T10:15:42.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T09:07:18.000Z (5 months ago)
- Last Synced: 2025-01-25T09:07:59.481Z (5 months ago)
- Topics: auto-complete, auto-completion, autocomplete, autocompletion, esm, esmodules, javascript, library
- Language: SCSS
- Homepage: https://kompletr.konfer.be
- Size: 3.19 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JS autocompletion library - Kømpletr
[](https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png#gh-light-mode-only)
[](https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png#gh-dark-mode-only)
[](https://www.codefactor.io/repository/github/steve-lebleu/kompletr)
[](https://coveralls.io/github/steve-lebleu/kompletr?branch=master)
[](https://github.com/steve-lebleu/kompletr/blob/master/LICENSE)
## 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
```bash
npm i kompletr --save
```
#### Import module
```javascript
import kompletr from 'kompletr'
```
Get CSS from *./node_modules/kompletr/css/kompletr.min.css*
### Direct download
1. Download latest release archive
2. Get JS from *[Your-vendors-path]/kompletr/js/kompletr.min.js*
3. Get CSS from *[Your-vendors-path]/kompletr/css/kompletr.min.css*
#### Import script and stylesheet
``` html
...
...
```
## Getting started
Define input element:
``` html
```
Invoke Kømpletr:
``` javascript
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](https://www.gnu.org/licenses/gpl-3.0.html)