Fast AJAX Autocomplete JavaScript Library – Cndk

Preview:

Description:

Cndk is a feature-rich, fully customizable, and AJAX-enabled autocomplete JavaScript library.

It displays an autocomplete list that contains suggestions that match what you typed in the autocomplete input.

Features:

• Load data from a JSON file.
• Data preload.
• Or load data on demand.
• Custom data rendering.
• Dark & Light themes.
• And much more.

How to use it:

1. Load the Cndk Autocomplete library.

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

2. Define your own data for the autocomplete in a JSON file.

// data.json
[
  {
      "text": "Germany",
      "id": "2",
      "flag": "https://www.countryflags.io/de/flat/32.png",
      "code": "+144"
  },
  {
      "text": "Belgium",
      "id": "4",
      "flag": "https://www.countryflags.io/be/flat/32.png",
      "code": "+32"
  },
  {
      "text": "Brazil",
      "id": "5",
      "flag": "https://www.countryflags.io/br/flat/32.png",
      "code": "+55"
  },
  // ...
]

3. Attach the autocomplete to an input field you specify and determine how the data is rendered as follows:

<input type="text" id="example" name="country" placeholder="Search" autofocus="" />

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

4. By default, the library preloads JSON data on page load. Set the type option to ‘dynamic’ if you only need to load data when the autocomplete is triggered.

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

5. All default options.

var autoComplete = new CndkAutoComplete(
    {
      // input selector
      input: '', 
      // path to JSON
      ajaxFile: '',
      // or 'dynamic'
      type: 'static',
      // min number of characters to trigger the autocomplete
      minCharsToSearch: 1, 
      // number of items to show on the suggestion list
      itemsShow: 5, 
      // auto focus the input when any item has been selected
      autoFocusWhenSelect: null,
      // disable the input if any item has been selected
      disableInputOnSelect: false,
      // show all items when value length = 0 and options is = true
      showAllOnInputClick: true,
      // submit the form when pressing Enter key
      submitFormOnEnter: false, 
      // submit the form when any item has been selected
      submitFormOnItemSelect: false,
      // $text | $id
      submitValueType: '${id}',
      // $id | $text | $url ...
      itemLayout: '${text}', 
      // $id | $text | $url ...
      itemInputLayout: '${text}',
      // root ID
      rootDivId: "cndkAutoComplete",
      // item class
      itemClass: 'cndk-item',
      // active item class
      itemClassActive: 'cndk-item-active',
      // or 'dark'
      theme: 'light',
    }
);