Fast AJAX Autocomplete JavaScript Library – Cndk

Category: Form , Javascript | August 23, 2021
Author:ilkerccom
Views Total:65 views
Official Page:Go to website
Last Update:August 23, 2021
License:MIT

Preview:

Fast AJAX Autocomplete JavaScript Library – Cndk

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',

    }
);

You Might Be Interested In:


Leave a Reply