Question

我对一些代码进行了小提琴设置。在用户输入的地方有一个输入字段。用户键入时，输入值应检查关键字。因此，如果任何字符与每个项目中的任何关键字匹配，它都应返回该项目。

因此，如果您输入“ memb”，它将在结果数组中返回正确的项目。同样，如果您完成单词“ member”（成员），则它在您键入字符时会起作用。但是，当您移动到第一个单词之后的另一个单词时，例如“时间”，它将不会返回该项目，直到您完成该单词的所有字符为止。当任何一个单词与任何术语单词匹配时，如何获取返回值。

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>

Answer 1

如果您过去使用过过滤器库，通常会发现它们都支持tokenizer

在下面的示例中，我使用了非常基本的String.prototype.split(" ")令牌生成器来拆分每个单独的令牌/术语。

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 => term.split(" ").some(t =>
        r.toLowerCase().includes(t) || 	t.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>

根据用户输入匹配单词

1 个答案: