期望效果圖.png

二、實(shí)現(xiàn)代碼：

// 模擬 options 數(shù)據(jù)：
const options = [
        {label: '中國大陸'， value: 'zg'},
        {label: '中國香港'， value: '2e'},
        {label: '中國澳門'， value: 'da'},
        {label: '中國臺灣'， value: 'df'},
        {label: '阿富汗'， value: '0b'},
        {label: '阿爾巴尼亞'， value: 'a2'}
        // ......
];

// 初始化 options 數(shù)據(jù)
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 組件應(yīng)用
<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;
}

修復(fù)代碼：

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

修復(fù)代碼：

// 選中后數(shù)據(jù)還原
onSelect={() => {
       setCountryListOptions(options);
}}