javascript - 如何将Reactjs中的字符串与字符串列表进行比较并显示结果

Question

我的一个 React 组件 中有一个输入字段，它将接受用户的电子邮件 ID 的输入。我在服务器中保存了一个电子邮件 ID 列表。因此，当我在输入字段中键入内容时，我希望电子邮件 ID 的建议显示在当前现有列表的输入字段下方。所以，我有什么我想出的是，我应该使用 javascript 中的 localeCompare(string) 函数，其中我必须使用一些条件，例如:

input_string.localeCompare(existing_string)

那么，这是正确的方法还是还有其他方法可以继续？我是否必须创建一个新组件来在输入下方显示建议？

注意:我希望我的搜索以与 Google 搜索类似的方式工作，当我们在搜索栏中键入一些输入时，类似于搜索字符串的建议会出现在下面。

Answer 1

The localeCompare() method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

您可以使用filter ，然后您可以使用正则表达式。这是使用 includes 的示例方法:

render() {
  const emailList = [
    'a@a.com',
    'b@b.com',
    'c@c.com',
    'd@d.com',
    'e@e.com'
  ];
  const lookupList = emailList.filter(email => email.includes(inputRefValue));
  return <div>{ lookupList.map(el => el) }</div>
}