0

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

因此，如果您键入“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>

4

1 回答 1

0

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

在下面的示例中，我使用了一个非常基本的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>

于 2019-06-14T02:05:33.020 回答