Developer-friendly Autocomplete Library With Vanilla JavaScript – KutoComplete.Js

Preview:

Description:

An auto-complete textbox allows a user to easily provide additional information in a hassle-free manner. Rather than forcing them to type the entire data, the auto-completion helps provide easy and accurate suggestions for users in real time.

In this article, I’ll show you a brand new autocomplete library built using vanilla JavaScript, ideal for developers who need to create an autocomplete input for source code.

How to use it:

1. Load the KutoComplete library in the document.

<script src="./KutoComplete.js"></script>

2. Define your data in a JavaScript array. The autocomplete library allows multiple data sets as follows.

var data_arr1 = ['sum', 'avg', 'max', 'min'];
var data_arr2 = ['n1.personid', 'n2.id', 'n1.userid'];

3. Create an instance of the atc_kev_model(), where

• separator: Trigger character
• data: Data array
• additional_start_char: Additional start character
• additional_end_char: Additional end character
• atc_additional_start_char_for_validaton: Additional start character used for validation

//atc_kev_model(separator, data, additional_start_char, additional_end_char, atc_additional_start_char_for_validaton)
var atc_model_list = [
    new atc_kev_model("#", data_arr1, '(', ')', null),
    new atc_kev_model("[", data_arr2, null, ']', '[')
];

4. Initialize the KutoComplete on the input field you specify.

var html_input_id = 'example';
var atc_instance = new atc_kev(html_input_id, atc_model_list);
atc_instance.atc_init();

5. Valida the input values.

atc_instance.atc_validate_additional_chars()