You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
479 lines
34 KiB
479 lines
34 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[4147],{760977:function(p,r,n){n.r(r);var m=n(502143),_=n(968521),v=n(720719),h=n(28840),g=n(759907),l=n(828089),Z=n(825673),b=n(902068),x=n(574399),f=n(863942),y=n(316073),w=n(24628),A=n(719260),C=n(956140),c=n(127179),s=n(905388),I=n(40428),P=n(606965),k=n(268696),O=n(587302),o=n(424128),E=n(249706),D=n(795127),T=n(116846),S=n(212039),M=n(73024),L=n(553913),a=n(606641),i=n(667294),e=n(370917);function u(){var d=(0,a.eL)(),t=d.texts;return(0,e.tZ)(a.dY,null,(0,e.tZ)(i.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,t[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,t[1].value),(0,e.tZ)("li",null,t[2].value)),(0,e.tZ)("p",null,t[3].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,t[4].value,(0,e.tZ)("strong",null,t[5].value),t[6].value),(0,e.tZ)("li",null,t[7].value,(0,e.tZ)("strong",null,t[8].value),t[9].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(s.Z,{items:[{demo:{id:"components-auto-complete-demo-basic"},previewerProps:{title:"Basic Usage",filename:"components/auto-complete/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { AutoComplete } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const mockVal = (str, repeat = 1) => ({
|
|
value: str.repeat(repeat),
|
|
});
|
|
const App = () => {
|
|
const [value, setValue] = useState('');
|
|
const [options, setOptions] = useState([]);
|
|
const [anotherOptions, setAnotherOptions] = useState([]);
|
|
const getPanelValue = (searchText) =>
|
|
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
|
const onSelect = (data) => {
|
|
console.log('onSelect', data);
|
|
};
|
|
const onChange = (data) => {
|
|
setValue(data);
|
|
};
|
|
return (
|
|
<>
|
|
<AutoComplete
|
|
options={options}
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
onSelect={onSelect}
|
|
onSearch={(text) => setOptions(getPanelValue(text))}
|
|
placeholder="input here"
|
|
/>
|
|
<br />
|
|
<br />
|
|
<AutoComplete
|
|
value={value}
|
|
options={anotherOptions}
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
onSelect={onSelect}
|
|
onSearch={(text) => setAnotherOptions(getPanelValue(text))}
|
|
onChange={onChange}
|
|
placeholder="control mode"
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Basic Usage, set data source of autocomplete with <code>options</code> property.</p>"}},{demo:{id:"components-auto-complete-demo-options"},previewerProps:{title:"Customized",filename:"components/auto-complete/demo/options.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { AutoComplete } from 'antd';
|
|
const App = () => {
|
|
const [options, setOptions] = useState([]);
|
|
const handleSearch = (value) => {
|
|
let res = [];
|
|
if (!value || value.indexOf('@') >= 0) {
|
|
res = [];
|
|
} else {
|
|
res = ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
|
|
value,
|
|
label: \`\${value}@\${domain}\`,
|
|
}));
|
|
}
|
|
setOptions(res);
|
|
};
|
|
return (
|
|
<AutoComplete
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
onSearch={handleSearch}
|
|
placeholder="input here"
|
|
options={options}
|
|
/>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>You could set custom <code>Option</code> label</p>"}},{demo:{id:"components-auto-complete-demo-custom"},previewerProps:{title:"Customize Input Component",filename:"components/auto-complete/demo/custom.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { AutoComplete, Input } from 'antd';
|
|
const { TextArea } = Input;
|
|
const App = () => {
|
|
const [options, setOptions] = useState([]);
|
|
const handleSearch = (value) => {
|
|
setOptions(
|
|
!value
|
|
? []
|
|
: [
|
|
{
|
|
value,
|
|
},
|
|
{
|
|
value: value + value,
|
|
},
|
|
{
|
|
value: value + value + value,
|
|
},
|
|
],
|
|
);
|
|
};
|
|
const handleKeyPress = (ev) => {
|
|
console.log('handleKeyPress', ev);
|
|
};
|
|
const onSelect = (value) => {
|
|
console.log('onSelect', value);
|
|
};
|
|
return (
|
|
<AutoComplete
|
|
options={options}
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
onSelect={onSelect}
|
|
onSearch={handleSearch}
|
|
>
|
|
<TextArea
|
|
placeholder="input here"
|
|
className="custom"
|
|
style={{
|
|
height: 50,
|
|
}}
|
|
onKeyPress={handleKeyPress}
|
|
/>
|
|
</AutoComplete>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Customize Input Component</p>"}},{demo:{id:"components-auto-complete-demo-non-case-sensitive"},previewerProps:{title:"Non-case-sensitive AutoComplete",filename:"components/auto-complete/demo/non-case-sensitive.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { AutoComplete } from 'antd';
|
|
const options = [
|
|
{
|
|
value: 'Burns Bay Road',
|
|
},
|
|
{
|
|
value: 'Downing Street',
|
|
},
|
|
{
|
|
value: 'Wall Street',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<AutoComplete
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
options={options}
|
|
placeholder="try to type \`b\`"
|
|
filterOption={(inputValue, option) =>
|
|
option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
|
|
}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>A non-case-sensitive AutoComplete</p>"}},{demo:{id:"components-auto-complete-demo-certain-category"},previewerProps:{title:"Lookup-Patterns - Certain Category",filename:"components/auto-complete/demo/certain-category.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { UserOutlined } from '@ant-design/icons';
|
|
import { AutoComplete, Input } from 'antd';
|
|
const renderTitle = (title) => (
|
|
<span>
|
|
{title}
|
|
<a
|
|
style={{
|
|
float: 'right',
|
|
}}
|
|
href="https://www.google.com/search?q=antd"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
more
|
|
</a>
|
|
</span>
|
|
);
|
|
const renderItem = (title, count) => ({
|
|
value: title,
|
|
label: (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
{title}
|
|
<span>
|
|
<UserOutlined /> {count}
|
|
</span>
|
|
</div>
|
|
),
|
|
});
|
|
const options = [
|
|
{
|
|
label: renderTitle('Libraries'),
|
|
options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
|
|
},
|
|
{
|
|
label: renderTitle('Solutions'),
|
|
options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
|
|
},
|
|
{
|
|
label: renderTitle('Articles'),
|
|
options: [renderItem('AntDesign design language', 100000)],
|
|
},
|
|
];
|
|
const App = () => (
|
|
<AutoComplete
|
|
popupClassName="certain-category-search-dropdown"
|
|
dropdownMatchSelectWidth={500}
|
|
style={{
|
|
width: 250,
|
|
}}
|
|
options={options}
|
|
>
|
|
<Input.Search size="large" placeholder="input here" />
|
|
</AutoComplete>
|
|
);
|
|
export default App;
|
|
`,description:'<p>Demonstration of <a href="https://ant.design/docs/spec/reaction#lookup-patterns">Lookup Patterns: Certain Category</a>. Basic Usage, set options of autocomplete with <code>options</code> property.</p>',style:`.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
|
|
color: #666;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
|
|
border-bottom: 1px solid #f6f6f6;
|
|
}
|
|
|
|
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
.certain-category-search-dropdown .ant-select-dropdown-menu {
|
|
max-height: 300px;
|
|
}`}},{demo:{id:"components-auto-complete-demo-uncertain-category"},previewerProps:{title:"Lookup-Patterns - Uncertain Category",filename:"components/auto-complete/demo/uncertain-category.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { AutoComplete, Input } from 'antd';
|
|
const getRandomInt = (max, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
|
|
const searchResult = (query) =>
|
|
new Array(getRandomInt(5))
|
|
.join('.')
|
|
.split('.')
|
|
.map((_, idx) => {
|
|
const category = \`\${query}\${idx}\`;
|
|
return {
|
|
value: category,
|
|
label: (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<span>
|
|
Found {query} on{' '}
|
|
<a
|
|
href={\`https://s.taobao.com/search?q=\${query}\`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{category}
|
|
</a>
|
|
</span>
|
|
<span>{getRandomInt(200, 100)} results</span>
|
|
</div>
|
|
),
|
|
};
|
|
});
|
|
const App = () => {
|
|
const [options, setOptions] = useState([]);
|
|
const handleSearch = (value) => {
|
|
setOptions(value ? searchResult(value) : []);
|
|
};
|
|
const onSelect = (value) => {
|
|
console.log('onSelect', value);
|
|
};
|
|
return (
|
|
<AutoComplete
|
|
dropdownMatchSelectWidth={252}
|
|
style={{
|
|
width: 300,
|
|
}}
|
|
options={options}
|
|
onSelect={onSelect}
|
|
onSearch={handleSearch}
|
|
>
|
|
<Input.Search size="large" placeholder="input here" enterButton />
|
|
</AutoComplete>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:'<p>Demonstration of <a href="https://ant.design/docs/spec/reaction#lookup-patterns">Lookup Patterns: Uncertain Category</a>.</p>'}},{demo:{id:"components-auto-complete-demo-status"},previewerProps:{title:"Status",filename:"components/auto-complete/demo/status.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { AutoComplete, Space } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const mockVal = (str, repeat = 1) => ({
|
|
value: str.repeat(repeat),
|
|
});
|
|
const App = () => {
|
|
const [options, setOptions] = useState([]);
|
|
const [anotherOptions, setAnotherOptions] = useState([]);
|
|
const getPanelValue = (searchText) =>
|
|
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
|
return (
|
|
<Space
|
|
direction="vertical"
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<AutoComplete
|
|
options={options}
|
|
onSearch={(text) => setOptions(getPanelValue(text))}
|
|
status="error"
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
/>
|
|
<AutoComplete
|
|
options={anotherOptions}
|
|
onSearch={(text) => setAnotherOptions(getPanelValue(text))}
|
|
status="warning"
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
/>
|
|
</Space>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Add status to AutoComplete with <code>status</code>, which could be <code>error</code> or <code>warning</code>.</p>"}},{demo:{id:"components-auto-complete-demo-borderless"},previewerProps:{title:"Borderless",filename:"components/auto-complete/demo/borderless.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { AutoComplete } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const mockVal = (str, repeat = 1) => ({
|
|
value: str.repeat(repeat),
|
|
});
|
|
const App = () => {
|
|
const [options, setOptions] = useState([]);
|
|
const getPanelValue = (searchText) =>
|
|
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
|
return (
|
|
<AutoComplete
|
|
options={options}
|
|
style={{
|
|
width: 200,
|
|
}}
|
|
placeholder="Borderless"
|
|
onSearch={(text) => setOptions(getPanelValue(text))}
|
|
onSelect={globalThis.console.log}
|
|
bordered={false}
|
|
/>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>No border.</p>"}},{demo:{id:"components-auto-complete-demo-form-debug"},previewerProps:{debug:!0,title:"Debug in Form",filename:"components/auto-complete/demo/form-debug.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { SearchOutlined } from '@ant-design/icons';
|
|
import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
|
|
const formItemLayout = {
|
|
labelCol: {
|
|
xs: {
|
|
span: 24,
|
|
},
|
|
sm: {
|
|
span: 8,
|
|
},
|
|
},
|
|
wrapperCol: {
|
|
xs: {
|
|
span: 24,
|
|
},
|
|
sm: {
|
|
span: 16,
|
|
},
|
|
},
|
|
};
|
|
const App = () => (
|
|
<Form
|
|
style={{
|
|
margin: '0 auto',
|
|
}}
|
|
{...formItemLayout}
|
|
>
|
|
<Form.Item label="\u5355\u72EC AutoComplete">
|
|
<AutoComplete />
|
|
</Form.Item>
|
|
<Form.Item label="\u5355\u72EC TreeSelect">
|
|
<TreeSelect />
|
|
</Form.Item>
|
|
<Form.Item label="\u6DFB\u52A0 Input.Group \u6B63\u5E38">
|
|
<Input.Group compact>
|
|
<TreeSelect
|
|
style={{
|
|
width: '30%',
|
|
}}
|
|
/>
|
|
<AutoComplete />
|
|
</Input.Group>
|
|
</Form.Item>
|
|
<Form.Item label="\u5305\u542B search \u56FE\u6807\u6B63\u5E38">
|
|
<AutoComplete>
|
|
<Input suffix={<SearchOutlined />} />
|
|
</AutoComplete>
|
|
</Form.Item>
|
|
<Form.Item label="\u540C\u65F6\u6709 Input.Group \u548C\u56FE\u6807\u53D1\u751F\u79FB\u4F4D">
|
|
<Input.Group compact>
|
|
<TreeSelect
|
|
style={{
|
|
width: '30%',
|
|
}}
|
|
/>
|
|
<AutoComplete>
|
|
<Input suffix={<SearchOutlined />} />
|
|
</AutoComplete>
|
|
</Input.Group>
|
|
</Form.Item>
|
|
<Form.Item label="\u540C\u65F6\u6709 Input.Group \u548C Search \u7EC4\u4EF6\u53D1\u751F\u79FB\u4F4D">
|
|
<Input.Group compact>
|
|
<TreeSelect
|
|
style={{
|
|
width: '30%',
|
|
}}
|
|
/>
|
|
<AutoComplete>
|
|
<Input.Search />
|
|
</AutoComplete>
|
|
</Input.Group>
|
|
</Form.Item>
|
|
<Form.Item label="Input Group \u548C Button \u7ED3\u5408">
|
|
<Input.Group compact>
|
|
<TreeSelect
|
|
style={{
|
|
width: '20%',
|
|
}}
|
|
/>
|
|
<AutoComplete>
|
|
<Input.Search />
|
|
</AutoComplete>
|
|
<Button type="primary" icon={<SearchOutlined />}>
|
|
Search
|
|
</Button>
|
|
</Input.Group>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
export default App;
|
|
`}},{demo:{id:"components-auto-complete-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/auto-complete/demo/render-panel.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { AutoComplete, Switch, Space } from 'antd';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;
|
|
const App = () => {
|
|
const [open, setOpen] = React.useState(false);
|
|
return (
|
|
<Space
|
|
direction="vertical"
|
|
style={{
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
<Switch checked={open} onChange={() => setOpen(!open)} />
|
|
<InternalAutoComplete
|
|
defaultValue="lucy"
|
|
style={{
|
|
width: 120,
|
|
}}
|
|
open={open}
|
|
options={[
|
|
{
|
|
label: 'Jack',
|
|
value: 'jack',
|
|
},
|
|
{
|
|
label: 'Lucy',
|
|
value: 'lucy',
|
|
},
|
|
{
|
|
label: 'Disabled',
|
|
value: 'disabled',
|
|
},
|
|
{
|
|
label: 'Bamboo',
|
|
value: 'bamboo',
|
|
},
|
|
]}
|
|
/>
|
|
</Space>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Debug usage. Do not use in your production.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)(l.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[10].value),(0,e.tZ)("th",null,t[11].value),(0,e.tZ)("th",null,t[12].value),(0,e.tZ)("th",null,t[13].value),(0,e.tZ)("th",null,t[14].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[15].value),(0,e.tZ)("td",null,t[16].value),(0,e.tZ)("td",null,t[17].value),(0,e.tZ)("td",null,t[18].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[19].value),(0,e.tZ)("td",null,t[20].value),(0,e.tZ)("td",null,t[21].value),(0,e.tZ)("td",null,t[22].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[23].value),(0,e.tZ)("td",null,t[24].value),(0,e.tZ)("td",null,t[25].value),(0,e.tZ)("td",null,t[26].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[27].value),(0,e.tZ)("td",null,t[28].value),(0,e.tZ)("td",null,t[29].value),(0,e.tZ)("td",null,t[30].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[31].value),(0,e.tZ)("td",null,t[32].value),(0,e.tZ)("td",null,t[33].value),(0,e.tZ)("td",null,t[34].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[35].value),(0,e.tZ)("td",null,t[36].value),(0,e.tZ)("td",null,t[37].value),(0,e.tZ)("td",null,t[38].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[39].value),(0,e.tZ)("td",null,t[40].value),(0,e.tZ)("td",null,t[41].value),(0,e.tZ)("td",null,t[42].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[43].value),(0,e.tZ)("td",null,t[44].value),(0,e.tZ)("td",null,t[45].value),(0,e.tZ)("td",null,t[46].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[47].value),(0,e.tZ)("td",null,t[48].value),(0,e.tZ)("td",null,t[49].value),(0,e.tZ)("td",null,t[50].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[51].value),(0,e.tZ)("td",null,t[52].value),(0,e.tZ)("td",null,t[53].value),(0,e.tZ)("td",null,t[54].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[55].value),(0,e.tZ)("td",null,t[56].value),(0,e.tZ)("td",null,t[57].value),(0,e.tZ)("td",null,t[58].value),(0,e.tZ)("td",null,t[59].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[60].value),(0,e.tZ)("td",null,t[61].value,(0,e.tZ)("code",null,t[62].value),t[63].value,(0,e.tZ)("code",null,t[64].value),t[65].value),(0,e.tZ)("td",null,t[66].value),(0,e.tZ)("td",null,t[67].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[68].value),(0,e.tZ)("td",null,t[69].value,(0,e.tZ)("code",null,t[70].value),t[71].value,(0,e.tZ)("code",null,t[72].value),t[73].value),(0,e.tZ)("td",null,t[74].value),(0,e.tZ)("td",null,t[75].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[76].value),(0,e.tZ)("td",null,t[77].value),(0,e.tZ)("td",null,t[78].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,t[79].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[80].value),(0,e.tZ)("td",null,t[81].value),(0,e.tZ)("td",null,t[82].value),(0,e.tZ)("td",null,t[83].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[84].value),(0,e.tZ)("td",null,t[85].value),(0,e.tZ)("td",null,t[86].value),(0,e.tZ)("td",null,t[87].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[88].value),(0,e.tZ)("td",null,t[89].value),(0,e.tZ)("td",null,t[90].value),(0,e.tZ)("td",null,t[91].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[92].value),(0,e.tZ)("td",null,t[93].value),(0,e.tZ)("td",null,t[94].value),(0,e.tZ)("td",null,t[95].value),(0,e.tZ)("td",null,t[96].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[97].value),(0,e.tZ)("td",null,t[98].value),(0,e.tZ)("td",null,t[99].value),(0,e.tZ)("td",null,t[100].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[101].value),(0,e.tZ)("td",null,t[102].value),(0,e.tZ)("td",null,t[103].value),(0,e.tZ)("td",null,t[104].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[105].value),(0,e.tZ)("td",null,t[106].value),(0,e.tZ)("td",null,t[107].value),(0,e.tZ)("td",null,t[108].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[109].value),(0,e.tZ)("td",null,t[110].value),(0,e.tZ)("td",null,t[111].value),(0,e.tZ)("td",null,t[112].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[113].value),(0,e.tZ)("td",null,t[114].value),(0,e.tZ)("td",null,t[115].value),(0,e.tZ)("td",null,t[116].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[117].value),(0,e.tZ)("td",null,t[118].value),(0,e.tZ)("td",null,t[119].value),(0,e.tZ)("td",null,t[120].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[121].value),(0,e.tZ)("td",null,t[122].value),(0,e.tZ)("td",null,t[123].value),(0,e.tZ)("td",null,t[124].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[125].value),(0,e.tZ)("td",null,t[126].value),(0,e.tZ)("td",null,t[127].value),(0,e.tZ)("td",null,t[128].value),(0,e.tZ)("td",null,t[129].value)))),(0,e.tZ)("h2",{id:"methods"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#methods",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Methods"),(0,e.tZ)(l.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[130].value),(0,e.tZ)("th",null,t[131].value),(0,e.tZ)("th",null,t[132].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[133].value),(0,e.tZ)("td",null,t[134].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[135].value),(0,e.tZ)("td",null,t[136].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(c.Z,{component:"Select"}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"faq"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#faq",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"FAQ"),(0,e.tZ)("h3",{id:"why-doesnt-the-text-composition-system-work-well-with-onsearch-in-controlled-mode"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#why-doesnt-the-text-composition-system-work-well-with-onsearch-in-controlled-mode",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Why doesn't the text composition system work well with onSearch in controlled mode?"),(0,e.tZ)("p",null,t[137].value,(0,e.tZ)("code",null,t[138].value),t[139].value,(0,e.tZ)("code",null,t[140].value),t[141].value,(0,e.tZ)("code",null,t[142].value),t[143].value,(0,e.tZ)("code",null,t[144].value),t[145].value),(0,e.tZ)("p",null,t[146].value,(0,e.tZ)(o.Z,{href:"https://github.com/ant-design/ant-design/issues/18230",sourceType:"a"},t[147].value),t[148].value,(0,e.tZ)(o.Z,{href:"https://github.com/ant-design/ant-design/issues/17916",sourceType:"a"},t[149].value)))))}r.default=u}}]);
|
|
|