Fuse.js 是一个功能强大、轻量级的模糊搜索插件-BFW插件库

Fuse.js 是一个功能强大、轻量级的模糊搜索插件

Fuse.js 是一个功能强大、轻量级的模糊搜索插件，通过提供简单的 api 调用，达到强大的模糊搜索效果，无需搞懂复杂的模糊搜索算法。

什么是模糊搜索？

对于大多数前端开发者来说，搜索领域的知识储备往往是一片空白。一般来说，模糊搜索是查找和输入关键词相近的字符串的搜索结果的技术，准确地说应该称为近似字符串匹配。

Fuse.js 的技术特点

简单代码，实现模糊搜索、处理搜索，甚至不需要后端开发技术

数据量大的情况下表现优秀，性能很好

无 DOM 依赖，既可以在前端使用，也支持在 node.js 后端使用

强大的搜索支持：不仅支持搜索字符串数组、对象数组，支持嵌套搜索、加权搜索等

开发上手和使用建议

对于开发者来说，精确搜索的结果更精准，实现起来也很简单，只需要做字符串匹配即可，但这样的用户体验并不好，因为对于用户来说，键入的关键词往往是不精准的，很多时候因为输入不够规范、不够准确而导致没有搜索结果。

而模糊搜索通过匹配相似的结果，即使输入的关键词有错漏，也能“猜测”到用户想要的结果，大大提高搜索体验。Fuse.js 就是一个 JavaScript 语言下实现模糊搜索的工具库。

安装 Fuse.js

Fuse.js 支持多种方式安装使用，可以直接在 Vue 项目中使用：

npm

npm install --save fuse.js// yarn 安装yarn add fuse.js

cdn

如果是在浏览器页面中使用，直接引入<script>标签即可：

使用

// 搜索数据
const list = [
  {
    "title": "Old Man's War",
    "author": {
      "firstName": "John",
      "lastName": "Scalzi"
    }
  },
  {
    "title": "The Lock Artist",
    "author": {
      "firstName": "Steve",
      "lastName": "Hamilton"
    }
  },
....
];

// 搜索配置，可查看官网文档了解参数
const options = {
  keys: [
    "title",
    "author.firstName"
  ]
};
// 实例化 Fuse
const fuse = new Fuse(list, options);

// 传入搜索关键词，返回搜索结果
const pattern = "clolny"
return fuse.search(pattern)

Fuse.js 有2个构建版本：

基础版：仅包含标准模糊搜索的版本，轻量小巧

完整版：包含标准模糊搜索、扩展搜索和逻辑查询操作，占用空间较大

一般的标题、内容搜索，使用基础版本就能满足需求。

除了基本的搜索支持，Fuse.js 支持更高级的嵌套搜索、加权搜索和扩展搜索，对搜索算法有更高要求的开发者可以去阅读文档研究。

官网：https://fusejs.io/

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap");
        body {
            font-family: 'Raleway', sans-serif;
            font-size: 15px;
        }

        .search-names {
            padding: 1em 2em;
            width: 250px;
            background: #eee;
            display: inline-block;
            margin: auto;
            line-height: 1.6;
        }
        .search-names h3 {
            margin-bottom: 0;
        }
        .search-names a {
            color: #1da1f2;
        }

        .form-element {
            max-width: 900px;
            margin: auto;
            margin-top: 4em;
        }
        .form-element input {
            width: calc(100% - 19px);
            height: 45px;
            border: none;
            border-bottom: 1px solid #222;
            outline: none;
            margin: 0;
            padding-left: 18px;
            font-size: 40px;
            padding-bottom: 0.4em;
        }

        .query-filter {
            position: relative;
        }

        .auto-complete {
            position: absolute;
            top: 100%;
            width: 100%;
            background: #fff;
        }
        .auto-complete__options {
            display: none;
            border: 1px solid #ddd;
            padding: 1.6em 18px;
            margin: 0;
            list-style-type: none;
        }
        .auto-complete__options li {
            margin-bottom: 1.5em;
            font-size: 1.1em;
        }
        .auto-complete__options li:last-of-type {
            margin-bottom: 0;
        }

        .form-element.active .auto-complete__options {
            display: block;
        }
    </style>


</head>

<body translate="no">
   

    <div class="form-element">
        <form action="" autocomplete="off">
            <div class="query-filter">
                <input type="text" name="" id="search" placeholder="Search names">
                <div class="auto-complete">
                    <ul class="auto-complete__options">
                    </ul>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fuse.min.js"></script>
    <script>
        const searchInput = document.querySelector('#search');
        const resultParent = document.querySelector('.auto-complete__options');
        const formParent = document.querySelector('.form-element');
        let searchOptions = ["kenny", "kenneth", "ramey", "dakota", "kayden", "thor", "caroline", "shadow", "jelly"];


        const fuse = new Fuse(searchOptions, {
            threshold: 0.2
        });

        const updateResults = event => {
            let list = '';
            const inputField = event.currentTarget;
            const searchResults = fuse.search(inputField.value);

            // toggle auto complete dropdown
            if (inputField.value.length > 0) {
                formParent.classList.add('active');
            } else {
                formParent.classList.remove('active');
            }

            if (searchResults.length > 0) {
                searchResults.map(listItem => list += `<li>${listItem.item}</li>`);
            } else {
                list = "No results found";
            }

            resultParent.innerHTML = list;

        };


        searchInput.addEventListener('keyup', event => updateResults(event));

    </script>



</body>

</html>

Fuse.js 是一个功能强大、轻量级的模糊搜索插件

网友评论0

packer.js

jspdf.js

jszip.js

doT.js

jqprint.js

art-template.js

pdfobject.js

json-viewer.js

mergely.js

currencyFormatter.js