如何在React Material-UI Autocomplete组件中始终展示默认选项

实现方案 #

你可以通过自定义Autocomplete的filterOptions属性实现固定选项始终展示的需求，该方案不会影响其他选项的正常搜索过滤逻辑，完全适配你使用的MUI 4.12版本。
具体修改步骤如下：

• 先从@material-ui/lab导入默认过滤工具函数createFilterOptions，保留原有选项的正常搜索能力
• 自定义过滤规则，把你需要固定展示的选项（即示例中year: 1111的影片）优先插入结果列表最前面，再拼接经过正常过滤的其他选项，同时做去重处理避免固定项重复出现
• 给Autocomplete组件绑定自定义的filterOptions属性即可

完整修改后代码 #

import React, { useState, ChangeEvent } from 'react';
import {
  TextField,
  InputAdornment
} from "@material-ui/core";
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
import { Search } from "@material-ui/icons";
import axios from "axios";

// 初始化默认过滤函数，保留原有搜索匹配逻辑
const defaultFilter = createFilterOptions();

const AddressSearch = (props) => {

  const [addressesList, setAddressesList] = useState([]);
  const [inputAddress, setInputAddress] = useState<string>("");

  const handleAddressChange = (event: ChangeEvent<{ value: unknown }>) => {
    setInputAddress(event.target.value as string);
  };

  const topFilms = [
    { title: 'I HATE MOVIES', year: 1111 },
    { title: 'The Shawshank Redemption', year: 1994 },
    { title: 'The Godfather'},
    { title: 'The Godfather: Part II', year: 1974 }
  ]

  // 自定义过滤函数
  const filterOptions = (options, state) => {
    // 先拿到固定要展示的选项
    const fixedOption = topFilms.find(item => item.year === 1111);
    // 其他选项走正常过滤逻辑，排除掉固定选项避免重复
    const filteredOptions = defaultFilter(options.filter(item => item.year !== 1111), state);
    // 固定选项放最前面，拼接过滤后的其他选项
    return [fixedOption, ...filteredOptions];
  }

  return (
    <div>
      <Autocomplete
        id="address-autocomplete"
        freeSolo
        options={topFilms}
        filterOptions={filterOptions} // 绑定自定义过滤规则
        getOptionLabel={(option) => option.title}
        popupIcon={<Search />}
        renderInput={(params) => <TextField 
          id="address-input"                          
          {...params} 
          onChange={handleAddressChange}
          placeholder="Quickly find your address" 
          InputProps={{ ...params.InputProps,
          startAdornment: (
            <InputAdornment position="start"><Search /></InputAdornment>
          )}}
        /> }
      />
    </div>
  );
}

export default AddressSearch;

业务场景适配说明 #

如果你实际业务中选项是从接口请求回来的地址列表，也可以直接在接口请求成功调用setAddressesList时，把你需要固定展示的默认项拼到数组最前面，两种方案都能实现需求，用filterOptions的优势是不需要修改数据源，完全在组件渲染层处理逻辑。

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