Material UI Autocomplete v4多词无序搜索功能异常求助

问题核心是默认过滤逻辑仅按getOptionLabel返回的字符串顺序匹配，无法支持跨字段的多词无序搜索。你需要自定义过滤逻辑，让每个搜索关键词能匹配到选项的任意字段（名称、城市、邮编），不受顺序限制。

步骤1：实现自定义过滤函数 #

替换原有filterOptions，用以下逻辑实现多词跨字段匹配：

const filterOptions = (options, state) => {
  // 拆分搜索词为关键词数组，去除空值并统一转小写
  const searchTerms = state.inputValue.toLowerCase().split(' ').filter(term => term.trim() !== '');
  
  // 无搜索词时直接返回全部选项
  if (searchTerms.length === 0) return options;
  
  // 过滤出包含所有关键词的选项
  return options.filter(option => {
    const nom = option.nom.toLowerCase();
    const ville = option.ville.toLowerCase();
    const codePostal = option.code_postal.toLowerCase();
    
    // 确保每个关键词都能在任意字段中找到
    return searchTerms.every(term => {
      return nom.includes(term) || ville.includes(term) || codePostal.includes(term);
    });
  });
};

步骤2：修正选项匹配逻辑 #

原getOptionSelected中邮编的判断存在逻辑漏洞，改为严格匹配：

getOptionSelected={(option, value) => {              
  return (
    option.nom === value.nom &&
    option.ville === value.ville &&
    option.code_postal === value.code_postal
  );
}}

完整修改后的代码片段 #

const getOptionLabel = (option) => {
  if (option) {
    return `${option.nom} ${option.ville} ${option.code_postal}`;
  }
  return "";
};

const filterOptions = (options, state) => {
  const searchTerms = state.inputValue.toLowerCase().split(' ').filter(term => term.trim() !== '');
  if (searchTerms.length === 0) return options;
  
  return options.filter(option => {
    const nom = option.nom.toLowerCase();
    const ville = option.ville.toLowerCase();
    const codePostal = option.code_postal.toLowerCase();
    
    return searchTerms.every(term => {
      return nom.includes(term) || ville.includes(term) || codePostal.includes(term);
    });
  });
};

return (
  <>
    <Autocomplete
      onChange={handleValueChange}
      value={autocompleteValue}
      getOptionSelected={(option, value) => {              
        return (
          option.nom === value.nom &&
          option.ville === value.ville &&
          option.code_postal === value.code_postal
        );
      }}
      className="organizationAutocomplete"
      options={organizationsListOptions}
      disableListWrap
      onInputChange={handleGetData}
      disabled={dispensed == 1}
      filterOptions={filterOptions}
      getOptionLabel={getOptionLabel}
      renderOption={(props) => {
        return isInspecteur ? (
          <ul>
            <li {...props}>{props.academie}</li>
          </ul>
        ) : (
          <ul>
            <li {...props}>
              {props.nom} - {props.ville} - {props.code_postal}
            </li>
          </ul>
        );
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          InputProps={{ ...params.InputProps, disableUnderline: true }}
          label={
            isInspecteur
              ? "Exemples: Aix-Marseille, Lille, Toulouse"
              : "Exemple: Jules Ferry, Jean Moulin, 76350"
          }
        />
      )}
    />
  </>
);

逻辑说明 #

• 将搜索词拆分为独立关键词，确保每个关键词都能在选项的任意字段中匹配，不受顺序影响
• 统一转小写避免大小写敏感问题
• 保留原有getOptionLabel逻辑，不改变选项的显示格式

修改后，无论输入Jules Ferry as还是76350 Jules这类跨字段无序组合，都能匹配到对应选项。

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