根据用户输入匹配单词

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>