乐趣区

关于ide:3100-Star自动搜索补全的纯-JS-工具库

jiezi

【导语】：一个纯 JS 的轻量级主动补全工具库。

简介

autoComplete.js 是一个简略的、轻量级的、无其余依赖的 JS 主动补全工具库，它疾速、功能丰富，并且能够与各种我的项目或零碎无缝集成。它具备以下性能个性：

  • 纯 JS 语言编写
  • 无其余内部依赖
  • 简略易用
  • 轻量
  • 疾速
  • 功能丰富
  • 高度可定制

我的项目地址：

https://github.com/TarekRaafa…

装置

  • JSDELIVR CDN
// CSS 文件  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/css/autoComplete.min.css">  
  
// JS 文件  
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/js/autoComplete.min.js"></script>
  • cdnjs CDN
// CSS 文件  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/css/autoComplete.min.css">  
  
// JS 文件  
<script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/js/autoComplete.min.js"></script>
  • UNPKG CDN
// CSS 文件  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/css/autoComplete.min.css">  
  
// JS 文件  
<script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/8.3.2/js/autoComplete.min.js"></script>
  • HTML 本地加载 
<`script src="./autoComplete.js"></script>
  • HTML 本地 ES6 模块加载 
<script src="./index.js" type="module"></script>
  • ES6 导入 
import autoComplete from "./autoComplete";
  • npm 装置 
npm i @tarekraafat/autocomplete.js
  • yarn 装置 
yarn add @tarekraafat/autocomplete.js
  • Node 援用 
const autoComplete = require("@tarekraafat/autocomplete.js/dist/js/autoComplete");

应用

  1. 将 CSS 放到 HEAD 标签内 
<link rel="stylesheet" href="./css/autoComplete.css">  
OR  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/css/autoComplete.min.css">
  1. 将默认 id 值 autoComplete 调配给 input 元素或任何自定义的 id/class，并在 selector 中选中自定义的元素。参考第 4 步 
<input id="autoComplete" tabindex="1">    <!-- Default "id" value = "autoComplete"> -->
  1. 将 autoComplete.js 或集体的 js 文件放到 BODY 标签内 
<script src="./js/autoComplete.min.js"></script>  
<script src="./js/index.js"></script>  
OR  
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.2/dist/js/autoComplete.min.js"></script>  
<script src="./js/index.js"></script>
  1. 创立 autoComplete 引擎示例，并增加配置 
new autoComplete({data: {                              // Data src [Array, Function, Async] | (REQUIRED)  
      src: async () => {  
        // API key token  
        const token = "this_is_the_API_token_number";  
        // User search query  
        const query = document.querySelector("#autoComplete").value;  
        // Fetch External Data Source  
        const source = await fetch(`https://www.food2fork.com/api/search?key=${token}&q=${query}`);  
        // Format data into JSON  
        const data = await source.json();  
        // Return Fetched data  
        return data.recipes;  
      },  
      key: ["title"],  
      cache: false  
    },  
    query: {// Query Interceptor               | (Optional)  
          manipulate: (query) => {return query.replace("pizza", "burger");  
          }  
    },  
    sort: (a, b) => {// Sort rendered results ascendingly | (Optional)  
        if (a.match < b.match) return -1;  
        if (a.match > b.match) return 1;  
        return 0;  
    },  
    placeHolder: "Food & Drinks...",     // Place Holder text                 | (Optional)  
    selector: "#autoComplete",           // Input field selector              | (Optional)  
    observer: true,                      // Input field observer | (Optional)  
    threshold: 3,                        // Min. Chars length to start Engine | (Optional)  
    debounce: 300,                       // Post duration for engine to start | (Optional)  
    searchEngine: "strict",              // Search Engine type/mode           | (Optional)  
    resultsList: {// Rendered results list object      | (Optional)  
        container: source => {source.setAttribute("id", "food_list");  
        },  
        destination: "#autoComplete",  
        position: "afterend",  
        element: "ul"  
    },  
    maxResults: 5,                         // Max. number of rendered results | (Optional)  
    highlight: true,                       // Highlight matching results      | (Optional)  
    resultItem: {// Rendered result item            | (Optional)  
        content: (data, source) => {source.innerHTML = data.match;},  
        element: "li"  
    },  
    noResults: (dataFeedback, generateList) => {  
        // Generate autoComplete List  
        generateList(autoCompleteJS, dataFeedback, dataFeedback.results);  
        // No Results List Item  
        const result = document.createElement("li");  
        result.setAttribute("class", "no_result");  
        result.setAttribute("tabindex", "1");  
        result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;  
        document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);  
    },  
    onSelection: feedback => {// Action script onSelection event | (Optional)  
        console.log(feedback.selection.value.image_url);  
    }  
});
  1. 属性配置信息

  • data：示意数据源，键，缓存和后果集，值为

    • 1-src：字符串或对象数组；或者返回字符串或对象数组的函数，Function() => {}
    • 2-key：如果 src 是对象，key 是必须的，用于解析对象
    • 3-Cache：静态数据设置为 true，动态数据设置为 false
    • 4-Result：list，字符串或对象数据

  • query：查问拦截器

    • 只有一个办法 manipulate，参数是查问的对象，拦挡查问对象做个性化开发

  • sort：对后果集排序

    • 函数，对后果集排序，返回 1，-1，0

  • selector：输入框选择器，抉择需进行主动补全的元素：

    • id 或 class 字符串
    • 或者一个查问返回 html 元素的函数
  • 以上只是列出了比拟重要的几个配置属性，具体的阐明参考官网
  1. 生命周期函数
  • init：初始化 autoComplete 引擎后触发
  • fetch：获取数据实现后触发
  • input：用户每次输出时触发
  • results：搜寻实现准备就绪后触发
  • rendered：渲染后果列表后触发
  • navigation：在每个 resultList 后果交互上触发
  • unInit：初始化 autoComplete 引擎前触发
  1. 例子

官网提供了例子供参考，地址为：https://tarekraafat.github.io…：

反对以下浏览器：

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

退出移动版