二货机器人
4 years ago
committed by
GitHub
GitHub
6 changed files with 3 additions and 321 deletions
@ -1,166 +0,0 @@ |
|||||
--- |
|
||||
order: 12 |
|
||||
title: |
|
||||
zh-CN: 自定义搜索 |
|
||||
en-US: Custom Search |
|
||||
--- |
|
||||
|
|
||||
## zh-CN |
|
||||
|
|
||||
可以直接监听`showSearch.onChange`事件，自己实现搜索逻辑 |
|
||||
|
|
||||
## en-US |
|
||||
|
|
||||
You can directly listen `showSearch.onChange` events and implement search logic yourself |
|
||||
|
|
||||
```jsx |
|
||||
import { Cascader, Row, Col } from 'antd'; |
|
||||
import { useState } from 'react'; |
|
||||
|
|
||||
const CustomSearchCascaders = () => { |
|
||||
const originOptions = [ |
|
||||
{ |
|
||||
value: 'zhejiang', |
|
||||
label: 'Zhejiang', |
|
||||
children: [ |
|
||||
{ |
|
||||
value: 'hangzhou', |
|
||||
label: 'Hangzhou', |
|
||||
children: [ |
|
||||
{ |
|
||||
value: 'xihu', |
|
||||
label: 'West Lake', |
|
||||
}, |
|
||||
{ |
|
||||
value: 'xiasha', |
|
||||
label: 'Xia Sha', |
|
||||
disabled: true, |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
{ |
|
||||
value: 'jiangsu', |
|
||||
label: 'Jiangsu', |
|
||||
children: [ |
|
||||
{ |
|
||||
value: 'nanjing', |
|
||||
label: 'Nanjing', |
|
||||
children: [ |
|
||||
{ |
|
||||
value: 'zhonghuamen', |
|
||||
label: 'Zhong Hua men', |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
]; |
|
||||
const [options1, setOptions1] = useState(originOptions); |
|
||||
const [options2, setOptions2] = useState(originOptions); |
|
||||
const [options3, setOptions3] = useState(originOptions); |
|
||||
function flattenTree(opts, props, ancestor = []) { |
|
||||
let flattenOptions = []; |
|
||||
opts.forEach(option => { |
|
||||
const path = ancestor.concat(option); |
|
||||
if (props.changeOnSelect || !option.children || !option.children.length) { |
|
||||
flattenOptions.push(path); |
|
||||
} |
|
||||
if (option.children) { |
|
||||
flattenOptions = flattenOptions.concat(flattenTree(option.children, props, path)); |
|
||||
} |
|
||||
}); |
|
||||
return flattenOptions; |
|
||||
} |
|
||||
function onChange(value, selectedOptions) { |
|
||||
console.log(value, selectedOptions); |
|
||||
} |
|
||||
|
|
||||
function filter(inputValue, path) { |
|
||||
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); |
|
||||
} |
|
||||
function highlightKeyword(str, keyword) { |
|
||||
return str.split(keyword).map((node, index) => |
|
||||
index === 0 |
|
||||
? node |
|
||||
: [ |
|
||||
<span style={{ color: 'blue' }} key="seperator"> |
|
||||
{keyword} |
|
||||
</span>, |
|
||||
node, |
|
||||
], |
|
||||
); |
|
||||
} |
|
||||
const flattenOptions = flattenTree(originOptions, { changeOnSelect: false }); |
|
||||
function search(val) { |
|
||||
const filtered = []; |
|
||||
flattenOptions.forEach(path => { |
|
||||
const match = filter(val, path); |
|
||||
if (match) { |
|
||||
filtered.push(path); |
|
||||
} |
|
||||
}); |
|
||||
const result = filtered.map(path => ({ |
|
||||
__IS_FILTERED_OPTION: true, |
|
||||
path, |
|
||||
value: path.map(o => o.value), |
|
||||
label: path.map((option, index) => { |
|
||||
const { label } = option; |
|
||||
const node = label.indexOf(val) > -1 ? highlightKeyword(label, val) : label; |
|
||||
return index === 0 ? node : [' / ', node]; |
|
||||
}), |
|
||||
disabled: path.some(o => !!o.disabled), |
|
||||
isEmptyNode: true, |
|
||||
})); |
|
||||
return result; |
|
||||
} |
|
||||
function onChange1(val) { |
|
||||
const result = search(val); |
|
||||
setOptions1(result); |
|
||||
} |
|
||||
function onChange2(val) { |
|
||||
const result = search(val); |
|
||||
setOptions2(result); |
|
||||
} |
|
||||
function onChange3(val) { |
|
||||
const result = search(val); |
|
||||
setOptions3(result); |
|
||||
} |
|
||||
return ( |
|
||||
<Row gutter={[12, 18]}> |
|
||||
<Col span={24}> |
|
||||
<Cascader |
|
||||
options={options1} |
|
||||
onChange={onChange} |
|
||||
placeholder="Please select" |
|
||||
showSearch={{ |
|
||||
onChange: onChange1, |
|
||||
}} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col span={24}> |
|
||||
<Cascader |
|
||||
options={options2} |
|
||||
onChange={onChange} |
|
||||
placeholder="Please select" |
|
||||
showSearch={{ |
|
||||
onChange: onChange2, |
|
||||
}} |
|
||||
/> |
|
||||
</Col> |
|
||||
<Col span={24}> |
|
||||
<Cascader |
|
||||
options={options3} |
|
||||
onChange={onChange} |
|
||||
placeholder="Please select" |
|
||||
showSearch={{ |
|
||||
onChange: onChange3, |
|
||||
}} |
|
||||
/> |
|
||||
</Col> |
|
||||
</Row> |
|
||||
); |
|
||||
}; |
|
||||
ReactDOM.render(<CustomSearchCascaders />, mountNode); |
|
||||
``` |
|
||||
Loading…
Reference in new issue