autoComplete.js 开源项目教程

autoComplete.js 开源项目教程

autoComplete.jsSimple autocomplete pure vanilla Javascript library.项目地址:https://gitcode.com/gh_mirrors/au/autoComplete.js

1. 项目的目录结构及介绍

autoComplete.js 项目的目录结构相对简洁，主要包含以下几个部分：

• dist/: 该目录包含了项目的构建输出，即编译后的 JavaScript 文件和样式文件。
  • autoComplete.js: 主库文件。
  • autoComplete.min.js: 压缩后的主库文件。
• examples/: 该目录包含了多个示例，展示了如何使用 autoComplete.js。
  • basic/: 基本的自动完成示例。
  • custom/: 自定义配置的自动完成示例。
• src/: 该目录包含了项目的源代码。
  • js/: JavaScript 源代码。
  • scss/: SCSS 样式文件。
• test/: 该目录包含了项目的测试文件。
• docs/: 该目录包含了项目的文档。
• package.json: 项目的 npm 配置文件，包含了项目的依赖、脚本等信息。
• README.md: 项目的介绍文档。

2. 项目的启动文件介绍

autoComplete.js 的启动文件位于 src/js/autoComplete.js。该文件是项目的核心，包含了自动完成功能的主要逻辑。用户可以通过引入该文件来使用 autoComplete.js。

<script src="path/to/autoComplete.js"></script>

3. 项目的配置文件介绍

autoComplete.js 的配置文件实际上是在使用时通过 JavaScript 对象传递的。以下是一个基本的配置示例：

new autoComplete({
  data: {
    src: async () => {
      const query = document.querySelector("#autoComplete").value;
      const source = await fetch(`https://example.com/search?q=${query}`);
      const data = await source.json();
      return data;
    },
    keys: ["name"],
  },
  placeHolder: "Search for ...",
  selector: "#autoComplete",
  threshold: 3,
  debounce: 300,
  searchEngine: "strict",
  resultsList: {
    render: true,
    container: (source) => {
      source.classList.add("my-custom-class");
    },
    element: "ul",
    noResults: true,
  },
  maxResults: 5,
  highlight: true,
  onSelection: (feedback) => {
    document.querySelector("#autoComplete").value = feedback.selection.value;
  },
});

在这个配置对象中，你可以设置数据源、占位符文本、选择器、搜索阈值、防抖时间、搜索模式、结果列表的渲染方式、最大结果数、高亮显示以及选择后的处理逻辑。

autoComplete.jsSimple autocomplete pure vanilla Javascript library.项目地址:https://gitcode.com/gh_mirrors/au/autoComplete.js