Author: | kev7037 |
---|---|
Views Total: | 123 views |
Official Page: | Go to website |
Last Update: | February 23, 2022 |
License: | MIT |
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()