期望效果圖.png
二蘸劈、實現(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);
}}
