如何用Material UI AutoComplete替代停更的search-bar并添加带事件的搜索按钮？

当然没问题！既然material-ui-search-bar已经停止维护，用Material UI官方的AutoComplete来替代是个很棒的选择，而且完全可以给它加上搜索按钮并绑定事件，我来给你具体讲讲怎么做：

核心思路是利用AutoComplete的renderInput属性，在输入框的尾部（endAdornment）添加自定义的搜索按钮，同时保留组件原有的清除按钮功能。下面是完整的实现代码：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import { useState } from 'react';

export default function CustomSearchBar() {
  // 管理搜索输入框的值
  const [searchValue, setSearchValue] = useState('');
  // 示例下拉选项，不需要的话可以设为空数组
  const searchOptions = ['React', 'Material UI', 'JavaScript', 'TypeScript'];

  // 搜索按钮点击事件处理器
  const handleSearchTrigger = () => {
    if (!searchValue.trim()) {
      console.log('请输入搜索内容');
      return;
    }
    // 这里替换成你的实际搜索逻辑，比如调用API、过滤数据等
    console.log('开始搜索:', searchValue);
  };

  return (
    <Autocomplete
      options={searchOptions}
      value={searchValue}
      // 处理选中下拉选项的情况
      onChange={(event, newValue) => {
        setSearchValue(newValue || '');
      }}
      // 处理手动输入内容的情况
      onInputChange={(event, newInputValue) => {
        setSearchValue(newInputValue);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="搜索内容"
          variant="outlined"
          fullWidth
          InputProps={{
            ...params.InputProps,
            // 扩展尾部装饰：保留原有清除按钮，再添加搜索按钮
            endAdornment: (
              <>
                {params.InputProps.endAdornment}
                <IconButton
                  onClick={handleSearchTrigger}
                  edge="end"
                  aria-label="搜索"
                >
                  <SearchIcon />
                </IconButton>
              </>
            ),
          }}
        />
      )}
    />
  );
}

关键细节说明： #

• 状态管理：用useState维护输入框的searchValue，确保手动输入和选中下拉选项时，值都能同步更新
• 保留原有功能：通过{params.InputProps.endAdornment}保留了AutoComplete默认的清除按钮，不会丢失原有交互
• 自定义按钮绑定：在endAdornment中添加IconButton，并绑定handleSearchTrigger函数，点击按钮时就能执行你的搜索逻辑
• 灵活性：如果不需要下拉选项，只需要把searchOptions设为空数组，组件就会变成纯搜索框的样式，完全满足你的需求

这样修改后，你就能得到一个带搜索按钮的AutoComplete组件，既替代了停止维护的material-ui-search-bar，又实现了你想要的点击搜索触发事件的功能。

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