MissPlete 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01014/article/details/142508070

MissPlete 开源项目教程

miss-plete Misspelling-tolerant autocomplete in less than 220 lines of JavaScript. 项目地址: https://gitcode.com/gh_mirrors/mi/miss-plete

1. 项目介绍

MissPlete 是一个基于 ECMAScript 2015（ES6）编写的拼写错误容忍的自动完成库。它支持同义词，并且可以通过自定义算法来选择和排序补全项。默认情况下，它使用 Jaro-Winkler 距离算法，这使得它在处理拼写错误时比基于精确子字符串匹配的补全更有效。该项目代码简洁，不到 220 行，无依赖项。

2. 项目快速启动

安装

首先，通过 npm 安装 MissPlete：

npm install miss-plete --save

使用示例

以下是一个简单的使用示例，展示了如何在 HTML 输入框中使用 MissPlete：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MissPlete 示例</title>
</head>
<body>
    <input type="text" name="city" placeholder="输入城市名称">
    <script src="node_modules/miss-plete/dist/MissPlete.js"></script>
    <script>
        new MissPlete({
            input: document.querySelector('input[name="city"]'),
            options: [
                ["Barcelona", "BCN"],
                ["San Francisco", "SF"]
            ]
        });
    </script>
</body>
</html>

自定义评分函数

你可以自定义评分函数来控制补全项的排序：

new MissPlete({
    input: document.querySelector('input[name="city"]'),
    options: [
        ["Barcelona", "BCN"],
        ["San Francisco", "SF"]
    ],
    scoreFn: (inputValue, optionSynonyms) => {
        const score = Math.random();
        return {
            score: score,
            displayValue: `${optionSynonyms[0]} (${score})`
        };
    }
});