Antd-Select下拉搜索内容高亮

一、期望效果： 期望效果图.png

二、实现代码：

// 模拟 options 数据：
const options = [
        {label: '中国大陆'， value: 'zg'},
        {label: '中国香港'， value: '2e'},
        {label: '中国澳门'， value: 'da'},
        {label: '中国台湾'， value: 'df'},
        {label: '阿富汗'， value: '0b'},
        {label: '阿尔巴尼亚'， value: 'a2'}
        // ......
];

// 初始化 options 数据
const [countryListOptions, setCountryListOptions] = useState();

useEffect(()=>{
    setCountryListOptions(options);
},[]);

const handleSearch = (value) => {
     const options = options.map((val) => {
      const content = val.label.replaceAll(value, `<i class='selectSearchString'>${ value }</i>`)
       return {
         label: <span dangerouslySetInnerHTML={{ __html: content }} />,
         value: val.value,
       };
     });
    setCountryListOptions(options);
};


// Select 组件应用
<Select
      allowClear
      // disabled={disabled}
      showSearch
      // value={value}
      // onChange={(value) => {
        // onChange(value);
      // }}
      options={countryListOptions}
      onSearch={handleSearch}
      filterOption={(input, options) => {
        const labelVal =
          options.props.label.props.children ||
          options.props.label.props.dangerouslySetInnerHTML?.__html ||
          options.props.label;
        return labelVal.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      }}
    />


// 样式
:global(.selectSearchString){
    color: #8969c8;
    font-weight: bold;
    font-style: normal;
}

三、选中后 input 中文字样式出现 bug：

修复代码：

/* less 中增加 */
:global(.ant-select-selection-item .selectSearchString){
    color: inherit;
    font-weight: normal;
}

四、再次显示下拉面板时样式 bug：

修复代码：

// 选中后数据还原
onSelect={() => {
       setCountryListOptions(options);
}}