React Native如何实现仅匹配输入前缀的单词搜索功能

算力阿峰

2026-11-6

React Native 单词搜索前缀匹配调整方案

原有逻辑的问题

当前过滤判断用listItem.indexOf(textData) > -1，只要单词任意位置包含输入文本就会被返回，属于全量包含匹配，不符合“仅匹配单词前缀”的需求。

调整方式

仅需修改过滤环节的匹配判断规则，两种可直接使用的实现：

调整indexOf判断阈值：将匹配条件从“出现位置大于-1”改为“出现位置严格等于0”，即输入文本必须位于单词最起始位置才会被匹配，对应代码为return listItem.indexOf(textData) === 0;
采用字符串原生startsWith方法：语义更清晰，专门用于判断字符串是否以指定内容开头，代码可读性更高，对应代码为return listItem.startsWith(textData);

调整后的完整函数

searchFilter = (text) => {
  const newData = dizi.filter((item) => {
    const listItem = item.name.toLowerCase();
    const textData = text.toLowerCase().trim();
    return listItem.startsWith(textData);
  });
  this.setState({
    diziler: newData,
  });
};