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

问题描述

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

当用户输入单词"tes"时，他看到的是项目"test"，如果他写了"tesz"，那么他将看不到项目。
如果用户键入( 输入错误）在 1 个字母的单词中，仍然得到想要的结果，因为经常发生用户漏写并写错字母的情况。

！也就是说，我需要一个过滤器，如果你打错了，仍然会显示出合适的结果，我怎样才能达到这样的效果？在这种情况下，他们对任何复杂的计算算法不感兴趣，但至少有 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>
  );
}

链接到代码和框 filter_react

解决方法

你可以试试这个 使用字符串相似度匹配最好的，是否要匹配前三个值进行比较并获得最匹配的（这个字符串相似度 npm 的评级看起来总是返回 0 可能需要你再找一个）。

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