JS实现无序关键词匹配的地址自动补全过滤替代方案

问题说明 #

现有过滤逻辑仅对地址label做连续子串匹配，当用户输入跳过地址中间片段时（比如输入500 S Himes Ave 2查找500 S Himes Ave Apt 2 Tampa, FL 33609）会匹配失败，无法支持用户按任意顺序输入关键词的场景。
示例地址数据结构如下：

[
    {
        "id": "af332e9d205ca",
        "label": "500 S Himes Ave Apt 2 Tampa, FL 33609",
        "data": {
            "zip": "33609",
            "city": "Tampa",
            "state": "FL",
            "streetAddress": "500 S Himes Ave",
            "secondaryAddress": "Apt 2"
        }
    },
    {
        "id": "53ffcb3f03da6",
        "label": "500 S Himes Ave Apt 20 Tampa, FL 33609",
        "data": {
            "zip": "33609",
            "city": "Tampa",
            "state": "FL",
            "streetAddress": "500 S Himes Ave",
            "secondaryAddress": "Apt 20"
        }
    },
    {
        "id": "072cd5f7c09c4",
        "label": "500 S Himes Ave Apt 21 Tampa, FL 33609",
        "data": {
            "zip": "33609",
            "city": "Tampa",
            "state": "FL",
            "streetAddress": "500 S Himes Ave",
            "secondaryAddress": "Apt 21"
        }
    },
    {
        "id": "c0fce5285fa31",
        "label": "500 S Himes Ave Apt 22 Tampa, FL 33609",
        "data": {
            "zip": "33609",
            "city": "Tampa",
            "state": "FL",
            "streetAddress": "500 S Himes Ave",
            "secondaryAddress": "Apt 22"
        }
    },
    {
        "id": "306f91ef7f85d",
        "label": "500 S Himes Ave Apt 23 Tampa, FL 33609",
        "data": {
            "zip": "33609",
            "city": "Tampa",
            "state": "FL",
            "streetAddress": "500 S Himes Ave",
            "secondaryAddress": "Apt 23"
        }
    }
]

原有过滤实现：

const filterOptions = useCallback((options: IOption[], state) => {
    const newOptions: IOption[] = [];

    options.forEach((element) => {
      if (element.label.toLowerCase().includes(state.inputValue.toLowerCase())) {
        newOptions.push(element);
      }
    });
    return newOptions;
  }, []);

优化实现 #

核心逻辑是将用户输入按空白拆分为独立关键词，不要求关键词连续、按顺序出现，只要所有关键词都在地址内容中命中就保留选项，额外增加匹配度排序让更相关的结果靠前展示。

const filterOptions = useCallback((options: IOption[], state) => {
  // 预处理输入：转小写、按任意空白字符拆分、过滤空值
  const keywords = state.inputValue
    .toLowerCase()
    .split(/\s+/)
    .filter(word => word.length > 0);

  // 输入为空时直接返回全量选项
  if (keywords.length === 0) return options;

  return options
    .filter(option => {
      const target = option.label.toLowerCase();
      // 所有关键词全部命中才保留该选项
      return keywords.every(word => target.includes(word));
    })
    // 按匹配度排序：关键词整体出现位置越靠前，排序优先级越高
    .sort((prev, next) => {
      const prevLabel = prev.label.toLowerCase();
      const nextLabel = next.label.toLowerCase();
      
      const prevScore = keywords.reduce((total, word) => total + prevLabel.indexOf(word), 0);
      const nextScore = keywords.reduce((total, word) => total + nextLabel.indexOf(word), 0);
      
      return prevScore - nextScore;
    });
}, []);

匹配效果 #

• 输入500 S Himes Ave Apt 2：连续关键词正常命中，匹配结果和原有逻辑一致
• 输入500 S Himes Ave 2：拆分后关键词为['500', 's', 'himes', 'ave', '2']，可正常匹配所有含公寓号2开头的同街道地址
• 支持任意顺序输入，比如输入Tampa 33609 2、FL 500 Himes这类非顺序关键词，都能正确命中对应地址

可选优化项 #

• 匹配范围不局限于label字段，可以同时校验结构化的data下的街道、城市、邮编、州字段，避免label格式化带来的匹配遗漏
• 对长度过短的关键词（比如单字符）增加匹配规则，避免输入单个字符时返回过多无关结果
• 如果需要更高容错，可以引入轻量模糊匹配逻辑处理少量拼写错误，但常规地址场景下全关键词命中已经能覆盖绝大多数用户输入习惯

内容的提问来源于stack exchange，提问作者Norayr Ghukasyan