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

Question

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

当用户输入单词 "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

Answer 1

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

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

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

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

javascript

reactjs

edit-distance