A pure JavaScript AJAX auto complete plugin – Cndk.AutoComplete.js


Category: Form JavaScript/jQuery Plugins | August 24, 2021
Author: ilkerccom
Official Page: Go to website
Last Update: August 24, 2021
License: MIT

javascript auto complete plugin

Description:

You must be looking for a JavaScript AJAX auto complete plugin, which can help you. In such case, Cdnk can be the good option for you. Because, it comes with various features such as:

  • Cdnk is fully customizable means, you can customize it as per your requirement.
  • It supports AJAX based auto complete feature.
  • Load data from JSON file.
  • You can load data based on the event fired with AJAX.
  • Supports custom data rendering feature.
  • Themes such as Dart and light.
  • Various other options available to customize it.

How can I use it?

1. Include the Cdnk js and CSS files.

<link href="cndk.autocomplete.css" rel="stylesheet" type="text/css">
<script src="cndk.autocomplete.js" type="text/javascript"></script>

2. Create JSON file, that will hold the data.

[
    {
        "text": "Türkiye",
        "id": "1",
        "flag": "https://www.countryflags.io/tr/flat/32.png",
        "code": "+90"
    },
    {
        "text": "Germany",
        "id": "2",
        "flag": "https://www.countryflags.io/de/flat/32.png",
        "code": "+144"
    },
    {
        "text": "Azerbaijan",
        "id": "3",
        "flag": "https://www.countryflags.io/az/flat/32.png",
        "code": "+994"
    }
]

3. Create the <input> element in your page, where the auto complete feature will work.

<input type="text" id="inputCountry" name="country" class="form-control" placeholder="Search" autofocus="">

4. Now, Add the following JavaScript code that will make the auto complete feature work.

var autoComplete = new CndkAutoComplete(
            {
                input: '#inputCountry',
                ajaxFile: 'json/phone_codes.json',
                itemLayout: '<img style="width:15px;" src="${flag}"/> ${text} (<em>${code}</em>)',
                itemInputLayout: '${code}',
                type: 'static'
            });

5. Default options, which you can use as per your requirements.

// Default options
        var defaults = {
            input: '', /* Input selector with classname (.) or  ID (#) */
            ajaxFile: '', /* Static or dynamic AjaxFile URL */
            type: 'static', /* static | dynamic */
            minCharsToSearch: 1, /* Min chars to search in items */
            itemsShow: 5, /* Max items to show on list */
            autoFocusWhenSelect: null, /* Focus another input element when any item has been selected */
            disableInputOnSelect: false, /* Disable input if any item has been selected */
            showAllOnInputClick: true, /* Shows all items when value length = 0 and options is = true */
            submitFormOnEnter: false, /* Submit form when press Enter key on the keyboard */
            submitFormOnItemSelect: false, /* Submit form when any item has been selected */
            submitValueType: '${id}', /* $text | $id */
            itemLayout: '${text}', /* Can be used of any json value like in .JSON response => $id | $text | $url */
            itemInputLayout: '${text}', /* Can be used of any json value like in .JSON response => $id | $text | $url */
            rootDivId: "cndkAutoComplete",
            itemClass: 'cndk-item',
            itemClassActive: 'cndk-item-active',
            theme: 'light' /* light | dark */
        }