在前端开发中，我们经常需要实现输入框的自动补全功能。而 fuzzy-matching 是一个非常好用的 npm 包，通过它可以实现模糊匹配，提高自动补全的效率。本文将介绍如何使用 fuzzy-matching 进行模糊匹配，并给出具体的示例代码。
安装
在使用 fuzzy-matching 之前，我们需要先进行安装。可以使用以下命令进行安装：
--- ------- -------------- ------
使用
初始化
首先需要初始化一个 fuzzy-matching 实例：
----- ------------- - -------------------------- ----- -- - --- --------------------- ------ --------
以上代码中，我们传入了一个数组 ['foo', 'bar', 'baz']，这就是我们要进行模糊匹配的字符串集合。
匹配
接下来，我们可以使用 get 方法来进行匹配：
--------------------------
以上代码中，我们传入了要匹配的字符串 'fo'，输出结果为：
- ------ ------ --------- ---- -
其中，value 表示匹配到的字符串，distance 则表示该字符串与 'fo' 的相似度。
自定义权重
默认情况下，fuzzy-matching 计算相似度时，每个字符的权重都是相同的。但是，在某些情况下，我们可能需要自定义权重，以达到更准确的匹配结果。比如在搜索引擎中，中文汉字的权重通常会更高。
这时，我们可以传入一个函数来自定义权重：
----- -- - --- --------------------- ------ ------- -
---------- --- -- -- -
-- -- --- -- ------ --
-- --------- --- - -- -------- - - -- -------------- ------ ----
------ --
-
---
--------------------------以上代码中，我们自定义了权重函数 compareFn，它会对每个字符进行计算，并返回一个权重值。在这个例子中，我们通过判断字符是否相等、长度等因素来计算权重。
示例代码
以下是一个完整的示例代码，演示如何使用 fuzzy-matching 实现输入框自动补全功能：
----- ------------- - --------------------------
----- ------- - ---------------------------------
----- --------- - -----------------------------------
-- --- -------------- --
----- -- - --- --------------------- ------ --------
-- ---------
--------------------------------- -- -- -
----- ----- - ---------------------
-- -----------------
-- -------- -
----------------------- - -------
-------
-
-- --------
----- ------ - --------------
-- -----------------
-- ---------------- - ---- -
----------------------- - -------
-------
-
-- --------
----------------------- - --------
------------------- - ---------------------------
---以上代码实现了一个简单的输入框自动补全功能，通过监听输入框输入事件，并使用 fuzzy-matching 进行模糊匹配，最终显示匹配结果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/44791