jQuery Autocomplete如何匹配数组中的完整单词

这个问题我之前也碰到过，核心就是把原来的子串模糊匹配改成完整单词级别的精确匹配，下面给你具体的实现思路和代码示例，不管你是自己手写的组件还是用第三方UI库，都能套用这个逻辑：

核心思路拆解 #

1. 预处理输入和源数据：把用户输入的内容去掉前后空白，同时把每个分类值（比如 "all caller tallest"）拆分成独立的单词数组，避免子串匹配到单词内部的字符。
2. 替换匹配逻辑：从原来的"检查任意子串是否存在"，改成"检查是否有完整单词和输入内容匹配"。

手写组件的实现示例（以JavaScript为例） #

假设你原来的过滤逻辑是这样的（子串匹配）：

// 原来的逻辑：匹配任意字母组合
const filteredItems = sourceData.filter(item => {
  const content = item.value.application;
  return content.includes(userInput);
});

改成完整单词匹配后：

// 处理用户输入：去掉前后空格，统一转小写（实现大小写不敏感）
const targetWord = userInput.trim().toLowerCase();

// 新的过滤逻辑：匹配完整单词
const filteredItems = sourceData.filter(item => {
  // 把分类值拆分成单词数组，同样转小写
  const words = item.value.application.toLowerCase().split(/\s+/);
  // 检查是否有单词和目标词完全匹配
  return words.some(word => word === targetWord);
});

如果需要支持前缀匹配（比如输入 "cal" 能匹配 "caller"），只需要把 word === targetWord 改成 word.startsWith(targetWord) 就行。

第三方UI库的适配（以Material-UI Autocomplete为例） #

如果你用的是像Material-UI这类现成的Autocomplete组件，只需要自定义它的filterOptions属性：

import Autocomplete from '@mui/material/Autocomplete';

// 自定义过滤函数
const customFilter = (options, { inputValue }) => {
  const targetWord = inputValue.trim().toLowerCase();
  if (!targetWord) return options; // 输入为空时返回所有选项
  
  return options.filter(option => {
    const words = option.value.application.toLowerCase().split(/\s+/);
    return words.some(word => word === targetWord);
  });
};

// 组件使用时传入自定义过滤函数
<Autocomplete
  filterOptions={customFilter}
  options={yourSourceData}
  // 其他属性...
/>

额外注意点 #

• 如果需要支持多单词匹配（比如用户输入 "all call"，要匹配同时包含这两个单词的选项），可以把用户输入也拆分成单词数组，然后用every()检查源数据的单词数组是否包含所有输入的单词。
• 如果需要严格区分大小写，去掉代码里的.toLowerCase()即可。

内容的提问来源于stack exchange，提问作者the sandman