如何实现考虑到用户输入错误的过滤器?

How to implement a filter that takes into account the user's typo?

我有以下带有过滤器实现的伪代码,它与用户在输入字段中输入的内容巧合。

当用户输入单词 "tes" 时,他会看到项目 "test",如果他输入 "tesz",那么他将看不到项目。
如果用户输入 ( 输入错误)在一个 1 个字母的单词中,仍然可以得到想要的结果,因为经常会发生用户漏写和写错字母的情况。

!就是我需要一个filter,如果你打错了,还是会显示一个合适的结果,请问如何实现这样的效果?在这种情况下,他们对任何复杂的计算算法都不感兴趣,但至少有1个字符的错字

我的代码示例

import React, { useState } from "react";
import "./styles.css";

const mock = ["item1", "test", "item2", 'some data'];

export default function App() {
  const [value, setValue] = useState("");
  const [items, setItems] = useState(mock);
  const [filteredItem, setFilteredItem] = useState(mock);

  const onChange = ({ target: { value } }) => {
    setValue(value);
    const filteredItems = items.filter((el) => {
      return el.includes(value);
    });
    setFilteredItem(filteredItems);
  };

  return (
    <div className="App">
      <input onChange={onChange} value={value} />
      <ul>
        {filteredItem.map((el) => {
          return <li>{el}</li>;
        })}
      </ul>
    </div>
  );
}

link 到 codesandbox filter_react

你可以试试这个 使用字符串相似度来匹配最佳值,是否要匹配前三个值以进行比较并获得最佳匹配项(此字符串相似度 npm 的评级看起来总是 return 0 可能需要您找到另一个)。

https://codesandbox.io/s/nostalgic-lalande-muf0q?file=/src/App.js