根据用户输入匹配单词

Question

我有一些代码的小提琴设置。有一个用户输入的输入字段。当用户键入时，输入值应检查关键字。因此，如果任何字符与每个项目中的任何关键字匹配，则应返回该项目。因此，如果您键入“memb”，它将在结果数组中返回正确的项目。此外，如果您完成“成员”一词，它会在您键入字符时起作用。但是，当您在第一个单词之后移动到另一个单词时，例如“时间”，它不会返回该项目，直到您完成该单词的所有字符。当任何字符与任何术语单词匹配时，如何让它返回。class TodoApp extends React.Component {  constructor(props) {    super(props)    this.list = [        {        keywords:['member', 'support', 'life'],        content: 'This is my life',      },      {        keywords:['time', 'working', 'life'],        content: 'Cant stop working',      },      {        keywords:['ball'],        content: 'Help me play ball',      },    ];  }    onHandleChange = (event) => {    const { value } = event.target;    const result = this.onSearch( value.toLowerCase());    console.log('result = ', result);  }    onSearch = (term) => {    if (term.length < 3) return '';    return this.list.filter((item) => {         return item.keywords.some(r => r.toLowerCase().includes(term) ||   term.includes(r.toLowerCase()));    });  }    render() {    return (        <input onChange={this.onHandleChange}/>    )  }}ReactDOM.render(<TodoApp />, document.querySelector("#app"))body {  background: #20262E;  padding: 20px;  font-family: Helvetica;}#app {  background: #fff;  border-radius: 4px;  padding: 20px;  transition: all 0.2s;}input {  padding: 10px;  width: 400px;}li {  margin: 8px 0;}h2 {  font-weight: bold;  margin-bottom: 15px;}.done {  color: rgba(0, 0, 0, 0.3);  text-decoration: line-through;}input {  margin-right: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="app"></div>