Cndk.AutoComplete.js is a pure JavaScript plugin. It performs auto-complete operations within an INPUT.
Include the CSS file.
<link href="/cndk.autocomplete.css" rel="stylesheet" type="text/css">
Include the JS file.
<script src="/cndk.autocomplete.js" type="text/javascript"></script>
<script>
var autoComplete = new CndkAutoComplete(
{
input: '#inputCountry',
ajaxFile: '/demos/json/phone_codes.json'
});
</script>
input
: Selector of a input. You can use class name '.' or id '#'.
ajaxFile
: JSON file.
<input type="text" id="inputCountry" name="country" class="form-control" placeholder="Search" autofocus="">
text
and id
variables are required. It would be helpful if the id value was unique. You can send additional keys in the JSON file. Use these switches in the design regulations.
[
{
// Default keys
"text": "Germany",
"id": "1",
// Extra keys
"flag": "https://www.countryflags.io/de/flat/32.png",
"code": "+144"
},
...
]
// 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 */
}
itemLayout
refers to the view in the list. itemInputLayout
represents the input value. Here you can use any extra key from json file.
<script>
var autoComplete = new CndkAutoComplete(
{
...
itemLayout: '<img style="width:15px;" src="${flag}"/> ${text} (<em>${code}</em>)',
itemInputLayout: '${code}'
});
</script>
Sample JSON file response of the above example.
[
{
"text": "Germany",
"id": "1",
"flag": "https://www.countryflags.io/tr/flat/32.png",
"code": "+144"
},
]
Input selector with classname (.) or ID (#). You can use the default JQuery selectors.
Static or dynamic AjaxFile URL. The response should be as in the example above.
It can take "static" or "dynamic" values. Statically sent data is preloaded. Dynamically sent data is received during execution.
A call is made when the total length in the input exceeds this value.
Max items to show on list.
Focus another input element when any item has been selected. Here you can send a different element as in the input
value. Example: autoFocusWhenSelect: '#anotherInput'
Disable input if any item has been selected.
Shows all items when click on input if value not length = 0.
Submit form when press Enter key on the keyboard.
Submit form when any item has been selected.
You can specify which data type to send when the form is submitted.
You can specify how the elements in the list appear. You can use HTML code. You can also use any key returned from JSON data. Example: itemLayout: '<img style="width:15px;" src="${flag}"/> ${text} (<em>${code}</em>)','
You can specify how the input value will appear when an element is selected. HTML code cannot be used. You can also use any key returned from JSON data. Example: itemInputLayout: '${text}'
or itemInputLayout: '${id}'
You can use 'light' or 'dark' theme mode.