javascript - 按单词开头过滤结果

Question

我正在 ReactJS 类(class)的一个项目上工作，遇到了一个问题。我想搜索结果并根据单词的开头进行过滤，而不仅仅是结果中任何位置出现的字符串。

例如，在联系人列表中，键入“r”可能会返回 Richard、Aaron 和 Barba ra，因为它们都包含“r”。我如何制作它以便它从单词的开头开始过滤，就像在字典中一样？

我目前正在使用受控组件从数组中过滤结果，以动态搜索和过滤结果。以下是截至目前的相关片段:

filterResults = (venueFilter) => {
  let filteredVenues = this.state.venues
  filteredVenues = filteredVenues.filter((venue) => {
    let venueData = venue.name.toLowerCase();
    return venueData.indexOf(venueFilter.toLowerCase()) !== -1
  })
  this.setState({
    filteredVenues
  })
}

该项目正在调用我附近的餐馆。但是然后输入“r”会出现很多东西，因为它是一个常见的字母，而且因为“restaurant”以 R 开头。输入“M”会出现日本餐厅“MIKADO”(有帮助/良好的 UX)，但也会返回“Siam Thai”和“Stadtmauer”(不是特别有用/糟糕的 UX)。

如何从单词的开头过滤？

Answer 1

使用startsWith而不是 indexOf

filteredVenues = filteredVenues.filter(venue =>
  venue.name.toLowerCase().startsWith(venueFilter.toLowerCase())
)