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

【导语】：一个纯 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");

应用

将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">

将默认id值autoComplete调配给input元素或任何自定义的id/class，并在selector中选中自定义的元素。参考第4步

<input id="autoComplete" tabindex="1">    <!-- Default "id" value = "autoComplete"> -->

将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>

创立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);      }  });

属性配置信息

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元素的函数
以上只是列出了比拟重要的几个配置属性，具体的阐明参考官网

生命周期函数

init：初始化autoComplete引擎后触发
fetch：获取数据实现后触发
input：用户每次输出时触发
results：搜寻实现准备就绪后触发
rendered：渲染后果列表后触发
navigation：在每个resultList后果交互上触发
unInit：初始化autoComplete引擎前触发

例子

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

反对以下浏览器：

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