当前位置:主页 > JavsScript库 > 表单 >

快速AJAX自动完成JavaScript库 - Cndk
栏目分类:表单   发布日期:2021-08-26   浏览次数:

Cndk 是一个功能丰富、完全可定制且支持 AJAX 的自动完成 JavaScript 库。

它显示一个自动完成列表,其中包含与您在自动完成输入中键入的内容相匹配的建议。

特征:

  • 从 JSON 文件加载数据。

  • 数据预加载。

  • 或者按需加载数据。

  • 自定义数据渲染。

  • 黑暗与光明主题。

  • 以及更多。

如何使用它:

1. 加载 Cndk 自动完成库。

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

2. 在 JSON 文件中为自动完成定义您自己的数据。

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

3. 将自动完成附加到您指定的输入字段并确定数据的呈现方式,如下所示:

<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. 默认情况下,库在页面加载时预加载 JSON 数据。如果您只需要在触发自动完成时加载数据,请将类型选项设置为“动态”。

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. 所有默认选项。

var autoComplete = new CndkAutoComplete(
    {
 
      // 输入选择器
      input: '', 
 
      // JSON 
      ajaxFile: '',
 
      // 或 'dynamic'
      type: 'static',
 
      // 触发自动完成的
      minCharsToSearch: 1, 
 
      // 要显示在建议列表上的项目数
      itemsShow: 5, 
 
      // 选择任何项目时自动聚焦输入
      autoFocusWhenSelect: null,
 
      // 如果已选择任何项目则禁用输入
      disableInputOnSelect: false,
 
      // 当值长度 = 0 且选项 = true 时显示所有项目
      showAllOnInputClick: true,
 
      // 按下回车键时提交表单
      submitFormOnEnter: false, 
 
      // 当任何项目被选中时提交表单
      submitFormOnItemSelect: false,
 
      // $text | $id
      submitValueType: '${id}',
 
      // $id | $text | $url ...
      itemLayout: '${text}', 
 
      // $id | $text | $url ...
      itemInputLayout: '${text}',
 
      // root ID
      rootDivId: "cndkAutoComplete",
 
      // 项类
      itemClass: 'cndk-item',
 
      // 活动项类
      itemClassActive: 'cndk-item-active',
 
      // or 'dark'
      theme: 'light',
 
    }
);

官方网站:https://github.com/ilkerccom/cndkautocomplete

相关热词: Cndk自动完成

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库