3100+ Star！自動(dòng)搜索補(bǔ)全的純 JS 工具庫

【導(dǎo)語】：一個(gè)純 JS 的輕量級(jí)自動(dòng)補(bǔ)全工具庫。

簡(jiǎn)介

autoComplete.js 是一個(gè)簡(jiǎn)單的、輕量級(jí)的、無其他依賴的 JS 自動(dòng)補(bǔ)全工具庫，它快速、功能豐富，并且可以與各種項(xiàng)目或系統(tǒng)無縫集成。它具有以下功能特性：

• 純JS語言編寫
• 無其他外部依賴
• 簡(jiǎn)單易用
• 輕量
• 快速
• 功能豐富
• 高度可定制

項(xiàng)目地址：

https://github.com/TarekRaafat/autoComplete.js

安裝

• JSDELIVR CDN

// CSS文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css">

// JS文件
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/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導(dǎo)入

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標(biāo)簽內(nèi)

<link rel="stylesheet" href="./css/autoComplete.css">
OR
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css">

2. 將默認(rèn)id值autoComplete分配給input元素或任何自定義的id/class，并在selector中選中自定義的元素。參考第4步

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

3. 將autoComplete.js或個(gè)人的js文件放到BODY標(biāo)簽內(nèi)

<script src="./js/autoComplete.min.js"></script>
<script src="./js/index.js"></script>
OR
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/js/autoComplete.min.js"></script>
<script src="./js/index.js"></script>

4. 創(chuàng)建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);
    }
});

5. 屬性配置信息

• data：表示數(shù)據(jù)源，鍵，緩存和結(jié)果集，值為

• 1-src：字符串或?qū)ο髷?shù)組；或者返回字符串或?qū)ο髷?shù)組的函數(shù)，F(xiàn)unction() => {}
• 2-key：如果src是對(duì)象，key是必須的，用于解析對(duì)象
• 3-Cache：靜態(tài)數(shù)據(jù)設(shè)置為true，動(dòng)態(tài)數(shù)據(jù)設(shè)置為false
• 4-Result：list，字符串或?qū)ο髷?shù)據(jù)

• query：查詢攔截器

• 只有一個(gè)方法manipulate，參數(shù)是查詢的對(duì)象，攔截查詢對(duì)象做個(gè)性化開發(fā)

• sort：對(duì)結(jié)果集排序

• 函數(shù)，對(duì)結(jié)果集排序，返回1，-1，0

• selector：輸入框選擇器，選擇需進(jìn)行自動(dòng)補(bǔ)全的元素：

• id或class字符串
• 或者一個(gè)查詢返回html元素的函數(shù)

• 以上只是列出了比較重要的幾個(gè)配置屬性，詳細(xì)的說明參考官網(wǎng)

6. 生命周期函數(shù)

• init：初始化autoComplete引擎后觸發(fā)
• fetch：獲取數(shù)據(jù)完成后觸發(fā)
• input：用戶每次輸入時(shí)觸發(fā)
• results：搜索完成準(zhǔn)備就緒后觸發(fā)
• rendered：渲染結(jié)果列表后觸發(fā)
• navigation：在每個(gè)resultList結(jié)果交互上觸發(fā)
• unInit：初始化autoComplete引擎前觸發(fā)

7. 例子

官方提供了例子供參考，地址為：

https://tarekraafat.github.io/autoComplete.js/demo/

效果如下：

支持以下瀏覽器：