React-Material UI Autocomplete实现非句首Hashtag自动补全问题

嘿，这个坑我之前踩过！默认的Material UI Autocomplete组件确实只会针对输入框里的第一个词做匹配，但咱们只需要自定义几个核心逻辑，就能实现任意位置的Hashtag自动补全功能。下面是具体的实现思路和代码示例：

核心思路 #

问题的关键在于：默认组件是拿整个输入值去匹配选项，但我们需要的是只针对输入中最后一个#开头的片段做匹配，并且选中选项后，只替换这个片段而不是覆盖整个输入内容。

具体实现步骤 #

1. 写一个辅助函数提取最后一个Hashtag片段

首先我们需要从用户的输入里，精准定位出最后一个#后面的内容，这是我们要用来匹配补全选项的关键词：

const extractLastHashtagFragment = (inputValue) => {
  // 匹配最后一个#之后的非空格字符（支持#在输入的任意位置）
  const matchResult = inputValue.match(/#(\S*)$/);
  // 如果找到匹配，返回#后面的内容；否则返回空字符串
  return matchResult ? matchResult[1] : '';
};

2. 自定义filterOptions逻辑

默认的filterOptions会用整个输入值去过滤选项，我们要把它改成用提取到的Hashtag片段来过滤：

const filterOptions = (options, { inputValue }) => {
  const targetFragment = extractLastHashtagFragment(inputValue);
  // 如果没有有效的Hashtag片段，返回空数组（不显示补全菜单）
  if (!targetFragment) return [];
  // 过滤出包含目标片段的Hashtag选项（忽略大小写）
  return options.filter(option => 
    option.toLowerCase().includes(targetFragment.toLowerCase())
  );
};

3. 自定义选中后的替换逻辑

当用户选中一个补全选项时，我们需要把输入中最后那个未完成的Hashtag片段替换成选中的完整选项，而不是覆盖整个输入。这里需要结合useState来管理输入框的值：

import { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';

const HashtagAutocomplete = () => {
  const [inputValue, setInputValue] = useState('');
  // 预设的Hashtag补全选项
  const hashtagOptions = ['#hello', '#hope', '#happy', '#help', '#holiday'];

  // 上面的extractLastHashtagFragment和filterOptions函数放在这里

  return (
    <Autocomplete
      freeSolo  // 允许用户自由输入，不强制选择预设选项
      options={hashtagOptions}
      filterOptions={filterOptions}
      getOptionLabel={(option) => option}
      // 控制补全菜单的显示：只有当有有效Hashtag片段时才打开
      open={!!extractLastHashtagFragment(inputValue)}
      onChange={(event, selectedOption) => {
        if (!selectedOption) return;
        // 将输入中最后一个#片段替换为选中的完整Hashtag
        const updatedInput = inputValue.replace(/#(\S*)$/, selectedOption);
        setInputValue(updatedInput);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="输入内容（支持#补全）"
          variant="outlined"
          fullWidth
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      )}
    />
  );
};

export default HashtagAutocomplete;

额外优化点 #

• 如果需要支持动态加载Hashtag选项，可以把hashtagOptions改成从API获取的状态，配合useEffect实现
• 可以调整正则表达式，支持带特殊字符的Hashtag（比如#hello-world）
• 补全菜单的样式可以通过PopperProps自定义，让它更贴近Hashtag输入的位置

这样修改后，不管你是在输入开头、中间还是结尾输入#h，组件都会正确弹出包含#hello、#hope等选项的补全菜单啦！

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