1. Load the Cndk Autocomplete library.

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

2. Define your personal information for the autocomplete in a JSON file.

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

3. Attach the autocomplete to an input field you specify and decide how the info 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 information on web page load.

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 choices.

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

    }
);

Fast AJAX Autocomplete JavaScript Library, Cndk.AutoComplete.js Plugin/Github, autocomplete api js

See Demo And Download