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

快速自动完成和预输入库 – autoComplete.js
栏目分类:表单   发布日期:2021-09-01   浏览次数:

用于现代 Web 开发的动态、超快、无依赖且易于使用的自动完成和预输入 JavaScript 库。

主要特点:

  • 键入时自动显示建议列表。

  • 支持模糊搜索。

  • 突出显示匹配的结果。

  • 自定义占位符。

  • 限制要显示的最大结果数。

使用:

1. 安装并导入 autoComplete.js。

# Yarn
$ yarn add @tarekraafat/autocomplete.js --save
 
# NPM
$ npm i @tarekraafat/autocomplete.js --save
// ES6
import autoComplete from "./autoComplete";
 
// Browser
<link rel="stylesheet" href="dist/css/autoComplete.min.css" />
<script src="dist/js/autoComplete.min.js"></script>

2. 为建议定义您自己的数据。

// 字符串数组
const data = {
      key: ["CSS", "SCRIPT", "COM"]
}
 
// 对象数组
const data = {
      src: [
        { "js": "React" },
        { "js": "Angular" },
        { "css": "LESS" },
        { "css": "SASS" }
      ],
      key: ["js", "css"]
}
 
// 函数
const data = {
      src: () => { ... },
      key: ["js"],
      cache: true,
}
 
// async
const data = {
      src: async (query) => {
        try {
          // 从外部源获取数据
          const source = await fetch(`https://www.api.com/${query}`);
          // 数据是 `Objects` 数组 | `Strings`
          const data = await source.json();
          return data;
        } catch (error) {
          return error;
        }
      },
      // 要搜索的数据 'Object' key
      keys: ["js"]
},

3. 创建一个具有唯一 ID 'autoComplete' 的输入字段或文本字段。

<input id="autoComplete" type="text">

4. 将 autoComplete.js 附加到输入字段并完成。

new autoComplete({ 
 
    // 全局实例名称
    name: "autoComplete",
 
    // Array, Function, Async 
    data: data, 
 
    // 触发 autoComplete.js 引擎启动的 Event & Condition 规则
    trigger: (query) => { 
      return query .replace(//g, "").length; // 返回 "Boolean" 
    }, 
 
    // 对象有 1 个方法操作:带有(查询)参数的函数
    query: (input) => {
      return input.replace("js "); 
    }, 
 
    // 对渲染结果进行升序排序 | (可选) 
    sort: (a, b) => {                     
        if (a.match < b.match) return -1; 
        if (a.match > b.match) return 1;
        return 0;
    }, 
 
    // 最小字符长度
    threshold: 1,
 
    // 输入字段选择器
    selector: "#autoComplete", 
 
    // 输入字段观察者 | (可选)
    observer: true, 
 
    // placeholder 
    placeHolder: "Type Here ...", 
 
    // 输入空闲状态后引擎启动去抖动的最短持续时间
    debounce: 0, 
 
    // String lowerCase "strict" | "loose" 
    // 带有 2 个参数(查询、记录)的函数分别返回每个匹配项的 1 个字符串
    searchEngine: "strict", 
 
    // 搜索引擎变音符号处理程序。
    diacritics: false,
 
    // 呈现的结果列表对象
    resultsList: {
      tag: "ul",
      id: "autoComplete_list",
      class: "autoComplete_list",
      destination: "#autoComplete",
      position: "afterend",
      maxResults: 5,
      element: (list, data) => {
        // ...
      },
      tabSelect: false,
      noResults: false,
    }, 
 
    // 渲染结果项   
    resultItem: { 
      tag: "li",
      id: "autoComplete_result_[index]",
      class: "autoComplete_result",
      element: (item, data) => {
        // ...
      },
      highlight: false, // string or boolean
      selected: "", // selected class
    }, 
 
    // 事件
    events: { 
      input: { 
        focus: (event) => { 
          console.log("Input Field in focus!"); 
        } 
      }, 
      list: { 
        scroll: (event) => { 
          console.log("Results List scrolled!"); 
        } 
      } 
    }, 
     
});

5. API 方法。

// 预初始化
autoCompleteJS.preInit(); 
 
// 初始化
autoCompleteJS.init(); 
 
// 启动
autoCompleteJS.start(); 
 
// 搜索
autoCompleteJS.search(query, record, options); 
 
// 打开
autoCompleteJS.open(); 
 
// 下一个结果项
autoCompleteJS.next(); 
 
// 上一个结果项
autoCompleteJS.previous(); 
 
// 转到特定的结果项
autoCompleteJS.gotTo(1);

6. 事件处理程序。

document.querySelector("#autoComplete").addEventListener("response", function (event) {
  // "event.detail" 携带返回的数据值
  console.log(event.detail);
});
 
document.querySelector("#autoComplete").addEventListener("results", function (event) {
  // 搜索操作完成且匹配结果准备就绪后
});
 
document.querySelector("#autoComplete").addEventListener("open", function (event) {
  // 打开结果列表后
});
 
document.querySelector("#autoComplete").addEventListener("navigate", function (event) {
  // 在每个“resultsList”导航交互中
});
 
document.querySelector("#autoComplete").addEventListener("close", function (event) {
  // 在“resultsList”关闭后
});



官方网站:https://github.com/TarekRaafat/autoComplete.js

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