如何在React项目中实现Material UI(v0.20.0) Autocomplete搜索结果文本高亮？

我刚好之前在Material UI v0.20.0版本里折腾过这个高亮需求，当时也找不到现成的示例，摸索出了一套可行的方案，分享给你！

核心思路 #

旧版的Autocomplete组件支持通过renderOption自定义选项的渲染逻辑，我们可以利用这个props，把用户输入的搜索文本在选项中匹配到的部分用样式包裹起来，实现高亮效果。

具体实现步骤 #

1. 编写文本高亮处理函数

这个函数负责接收搜索文本和选项的显示文本，返回带有高亮标记的JSX：

// 转义正则特殊字符，避免输入特殊字符时出错
const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

const highlightMatch = (searchText, optionText) => {
  // 如果没有搜索文本，直接返回原文本
  if (!searchText.trim()) return optionText;
  
  // 创建不区分大小写的正则表达式
  const regex = new RegExp(`(${escapeRegExp(searchText)})`, 'gi');
  
  // 拆分文本并匹配高亮部分
  return optionText.split(regex).map((part, index) => 
    regex.test(part) ? (
      <span key={index} style={{ backgroundColor: '#ffeb3b', fontWeight: 600 }}>
        {part}
      </span>
    ) : (
      part
    )
  );
};

2. 在Autocomplete组件中使用自定义渲染

利用renderOptionprops，把每个选项的文本替换成高亮后的内容：

import React from 'react';
import Autocomplete from 'material-ui/Autocomplete';

// 示例选项数组，根据你的实际业务调整
const autocompleteOptions = [
  { label: 'ReactJS Material UI Integration' },
  { label: 'Material UI v0.20.0 Component Guide' },
  { label: 'Autocomplete Search Highlight Demo' },
  { label: 'Customizing MUI Autocomplete' }
];

class HighlightedAutocomplete extends React.Component {
  state = {
    currentSearchText: ''
  };

  // 处理搜索文本变化
  handleSearchChange = (event, newValue) => {
    this.setState({ currentSearchText: newValue });
  };

  // 自定义过滤逻辑（可选，确保过滤和高亮规则一致）
  customFilter = (searchText, option) => {
    return option.label.toLowerCase().includes(searchText.toLowerCase());
  };

  render() {
    return (
      <Autocomplete
        searchText={this.state.currentSearchText}
        onNewRequest={this.handleSearchChange}
        options={autocompleteOptions}
        filter={this.customFilter}
        // 自定义选项渲染，传入搜索文本和当前选项
        renderOption={(option, searchText) => (
          <div style={{ padding: '8px 12px' }}>
            {highlightMatch(searchText, option.label)}
          </div>
        )}
      />
    );
  }
}

export default HighlightedAutocomplete;

关键细节说明 #

• renderOption是v0.20.0版本Autocomplete的核心自定义渲染props，它接收两个参数：当前选项对象和用户输入的搜索文本
• 正则转义函数escapeRegExp很重要，避免用户输入*、(这类特殊字符时导致正则语法错误
• 高亮样式可以根据你的UI需求调整，比如修改背景色、文字颜色、添加下划线等
• 自定义filter函数可以确保搜索过滤的规则和高亮匹配的规则一致，避免出现过滤结果和高亮不匹配的情况

这个方案在我当时的项目里稳定运行，你可以直接拿去测试，再根据自己的业务场景调整细节～

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