期望效果图.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;
}
修复代码：
/* less 中增加 */
:global(.ant-select-selection-item .selectSearchString){
color: inherit;
font-weight: normal;
}
修复代码：
// 选中后数据还原
onSelect={() => {
setCountryListOptions(options);
}}
