home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-13 23:07:49 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
e514bde0677133a8fa65eeb8060761a74fbceced
ant-design/components/auto-complete/index.html
T
乐仪 e514bde067 Updates
2017-03-11 12:51:12 +08:00

542 lines
121 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="961780828"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started" data-reactid="54">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects" data-reactid="56">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app" data-reactid="58">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n Solution<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid/" data-reactid="94"><span data-reactid="95">Grid</span><span class="chinese" data-reactid="96"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/layout/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix/" data-reactid="105"><span data-reactid="106">Affix</span><span class="chinese" data-reactid="107"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/breadcrumb/" data-reactid="109"><span data-reactid="110">Breadcrumb</span><span class="chinese" data-reactid="111"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/back-top/" data-reactid="113"><span data-reactid="114">BackTop</span><span class="chinese" data-reactid="115"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/dropdown/" data-reactid="117"><span data-reactid="118">Dropdown</span><span class="chinese" data-reactid="119"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/menu/" data-reactid="121"><span data-reactid="122">Menu</span><span class="chinese" data-reactid="123"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/pagination/" data-reactid="125"><span data-reactid="126">Pagination</span><span class="chinese" data-reactid="127"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/steps/" data-reactid="129"><span data-reactid="130">Steps</span><span class="chinese" data-reactid="131"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/tabs/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="139"><a href="/components/auto-complete/" data-reactid="140"><span data-reactid="141">AutoComplete</span><span class="chinese" data-reactid="142"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/cascader/" data-reactid="144"><span data-reactid="145">Cascader</span><span class="chinese" data-reactid="146"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/checkbox/" data-reactid="148"><span data-reactid="149">Checkbox</span><span class="chinese" data-reactid="150"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/date-picker/" data-reactid="152"><span data-reactid="153">DatePicker</span><span class="chinese" data-reactid="154"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/form/" data-reactid="156"><span data-reactid="157">Form</span><span class="chinese" data-reactid="158"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/input/" data-reactid="160"><span data-reactid="161">Input</span><span class="chinese" data-reactid="162"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/input-number/" data-reactid="164"><span data-reactid="165">InputNumber</span><span class="chinese" data-reactid="166"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/mention/" data-reactid="168"><span data-reactid="169">Mention</span><span class="chinese" data-reactid="170"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/rate/" data-reactid="172"><span data-reactid="173">Rate</span><span class="chinese" data-reactid="174"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/radio/" data-reactid="176"><span data-reactid="177">Radio</span><span class="chinese" data-reactid="178"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/select/" data-reactid="180"><span data-reactid="181">Select</span><span class="chinese" data-reactid="182"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/slider/" data-reactid="184"><span data-reactid="185">Slider</span><span class="chinese" data-reactid="186"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/switch/" data-reactid="188"><span data-reactid="189">Switch</span><span class="chinese" data-reactid="190"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/tree-select/" data-reactid="192"><span data-reactid="193">TreeSelect</span><span class="chinese" data-reactid="194"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/time-picker/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/transfer/" data-reactid="200"><span data-reactid="201">Transfer</span><span class="chinese" data-reactid="202"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/upload/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge/" data-reactid="211"><span data-reactid="212">Badge</span><span class="chinese" data-reactid="213"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/calendar/" data-reactid="215"><span data-reactid="216">Calendar</span><span class="chinese" data-reactid="217"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/card/" data-reactid="219"><span data-reactid="220">Card</span><span class="chinese" data-reactid="221"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/carousel/" data-reactid="223"><span data-reactid="224">Carousel</span><span class="chinese" data-reactid="225"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/collapse/" data-reactid="227"><span data-reactid="228">Collapse</span><span class="chinese" data-reactid="229"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/popover/" data-reactid="231"><span data-reactid="232">Popover</span><span class="chinese" data-reactid="233"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tooltip/" data-reactid="235"><span data-reactid="236">Tooltip</span><span class="chinese" data-reactid="237"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/table/" data-reactid="239"><span data-reactid="240">Table</span><span class="chinese" data-reactid="241"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tag/" data-reactid="243"><span data-reactid="244">Tag</span><span class="chinese" data-reactid="245"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/timeline/" data-reactid="247"><span data-reactid="248">Timeline</span><span class="chinese" data-reactid="249"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/tree/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert/" data-reactid="258"><span data-reactid="259">Alert</span><span class="chinese" data-reactid="260"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/modal/" data-reactid="262"><span data-reactid="263">Modal</span><span class="chinese" data-reactid="264"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/message/" data-reactid="266"><span data-reactid="267">Message</span><span class="chinese" data-reactid="268"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/notification/" data-reactid="270"><span data-reactid="271">Notification</span><span class="chinese" data-reactid="272"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/progress/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="Basic Usage" data-reactid="301"><a href="#components-auto-complete-demo-basic" data-reactid="302">Basic Usage</a></li><li title="Customized" data-reactid="303"><a href="#components-auto-complete-demo-options" data-reactid="304">Customized</a></li><li title="Customize Input Component" data-reactid="305"><a href="#components-auto-complete-demo-antd" data-reactid="306">Customize Input Component</a></li><li title="Non-case-sensitive AutoComplete" data-reactid="307"><a href="#components-auto-complete-demo-non-case-sensitive" data-reactid="308">Non-case-sensitive AutoComplete</a></li><li title="Lookup-Patterns - Certain Category" data-reactid="309"><a href="#components-auto-complete-demo-certain-category" data-reactid="310">Lookup-Patterns - Certain Category</a></li><li title="Lookup-Patterns - Uncertain Category" data-reactid="311"><a href="#components-auto-complete-demo-uncertain-category" data-reactid="312">Lookup-Patterns - Uncertain Category</a></li></ul></div></div><section class="markdown" data-reactid="313"><h1 data-reactid="314"><!-- react-text: 315 -->AutoComplete<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/index.en-US.md" data-reactid="316"><i class="anticon anticon-edit" data-reactid="317"></i></a></h1><section class="markdown" data-reactid="318"><p data-reactid="319"><!-- react-text: 320 -->Autocomplete function of input field.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="321"><span data-reactid="322"><!-- react-text: 323 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="324">#</a></h2><p data-reactid="325"><!-- react-text: 326 -->When there is a need for autocomplete functionality.<!-- /react-text --></p></section><h2 data-reactid="327"><span data-reactid="328">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="329"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="330"><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="331"><section class="code-box" id="components-auto-complete-demo-basic" data-reactid="332"><section class="code-box-demo" data-reactid="333"><div style="width:200px;" class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" data-reactid="334"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="335"><div class="ant-select-selection__rendered" data-reactid="336"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="337">input here</div><ul data-reactid="338"><li class="ant-select-search ant-select-search--inline" data-reactid="339"><div class="ant-select-search__field__wrap" data-reactid="340"><input type="text" class="ant-input ant-input ant-select-search__field" value="" data-reactid="341"/><span class="ant-select-search__field__mirror" data-reactid="342"><!-- react-text: 343 --><!-- /react-text --><!-- react-text: 344 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="345"><b data-reactid="346"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="347"><div class="code-box-title" data-reactid="348"><a href="#components-auto-complete-demo-basic" data-reactid="349">Basic Usage</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/demo/basic.md" data-reactid="350"><i class="anticon anticon-edit" data-reactid="351"></i></a></div><div data-reactid="352"><p data-reactid="353"><!-- react-text: 354 -->Basic Usage, set datasource of autocomplete with <!-- /react-text --><code data-reactid="355"><!-- react-text: 356 -->dataSource<!-- /react-text --></code><!-- react-text: 357 --> property.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="358"></i></section><section class="highlight-wrapper" data-reactid="359"><div class="highlight" data-reactid="360"><i class="anticon anticon-copy code-box-code-copy" data-reactid="361"></i><pre class="language-jsx" data-reactid="362"><code data-reactid="363"><span class="token keyword">import</span> <span class="token punctuation">{</span> AutoComplete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onSelect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSelect'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Complete</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token operator">!</span>value <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
value<span class="token punctuation">,</span>
value <span class="token operator">+</span> value<span class="token punctuation">,</span>
value <span class="token operator">+</span> value <span class="token operator">+</span> value<span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onSelect<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">here"</span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Complete</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-auto-complete-demo-antd" data-reactid="364"><section class="code-box-demo" data-reactid="365"><div style="width:200px;" class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" data-reactid="366"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="367"><div class="ant-select-selection__rendered" data-reactid="368"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="369">input here</div><ul data-reactid="370"><li class="ant-select-search ant-select-search--inline" data-reactid="371"><div class="ant-select-search__field__wrap" data-reactid="372"><textarea style="height:50px;" class="ant-input ant-select-search__field" data-reactid="373"></textarea><span class="ant-select-search__field__mirror" data-reactid="374"><!-- react-text: 375 --><!-- /react-text --><!-- react-text: 376 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="377"><b data-reactid="378"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="379"><div class="code-box-title" data-reactid="380"><a href="#components-auto-complete-demo-antd" data-reactid="381">Customize Input Component</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/demo/antd.md" data-reactid="382"><i class="anticon anticon-edit" data-reactid="383"></i></a></div><div data-reactid="384"><p data-reactid="385"><!-- react-text: 386 -->Customize Input Component<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="387"></i></section><section class="highlight-wrapper" data-reactid="388"><div class="highlight" data-reactid="389"><i class="anticon anticon-copy code-box-code-copy" data-reactid="390"></i><pre class="language-jsx" data-reactid="391"><code data-reactid="392"><span class="token keyword">import</span> <span class="token punctuation">{</span> AutoComplete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onSelect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSelect'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Complete</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token operator">!</span>value <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span>
value<span class="token punctuation">,</span>
value <span class="token operator">+</span> value<span class="token punctuation">,</span>
value <span class="token operator">+</span> value <span class="token operator">+</span> value<span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
handleKeyPress <span class="token operator">=</span> <span class="token punctuation">(</span>ev<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'handleKeyPress'</span><span class="token punctuation">,</span> ev<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onSelect<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">here"</span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">onKeyPress</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleKeyPress<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">50</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>AutoComplete</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Complete</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-auto-complete-demo-certain-category" data-reactid="393"><section class="code-box-demo" data-reactid="394"><div class="certain-category-search-wrapper" style="width:250px;" data-reactid="395"><div style="width:100%;" class="ant-select-lg ant-select-lg certain-category-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" data-reactid="396"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="397"><div class="ant-select-selection__rendered" data-reactid="398"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="399">input here</div><ul data-reactid="400"><li class="ant-select-search ant-select-search--inline" data-reactid="401"><div class="ant-select-search__field__wrap" data-reactid="402"><span class="ant-input-preSuffix-wrapper" data-reactid="403"><input type="text" class="ant-input ant-input ant-select-search__field" value="" data-reactid="404"/><span class="ant-input-suffix" data-reactid="405"><i class="anticon anticon-search certain-category-icon" data-reactid="406"></i></span></span><span class="ant-select-search__field__mirror" data-reactid="407"><!-- react-text: 408 --><!-- /react-text --><!-- react-text: 409 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="410"><b data-reactid="411"></b></span></div></div></div><style data-reactid="412">.certain-category-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix {
right: 12px;
}
.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;
}
.certain-search-item-count {
position: absolute;
color: #999;
right: 16px;
}
.certain-category-search.ant-select-focused .certain-category-icon {
color: #108ee9;
}
.certain-category-icon {
color: #6E6E6E;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 16px;
}</style></section><section class="code-box-meta markdown" data-reactid="413"><div class="code-box-title" data-reactid="414"><a href="#components-auto-complete-demo-certain-category" data-reactid="415">Lookup-Patterns - Certain Category</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/demo/certain-category.md" data-reactid="416"><i class="anticon anticon-edit" data-reactid="417"></i></a></div><div data-reactid="418"><p data-reactid="419"><!-- react-text: 420 -->Demonstration of <!-- /react-text --><a href="https://ant.design/docs/spec/reaction#Lookup-Patterns" data-reactid="421"><!-- react-text: 422 -->Lookup Patterns: Certain Category<!-- /react-text --></a><!-- react-text: 423 -->.
Basic Usage, set datasource of autocomplete with <!-- /react-text --><code data-reactid="424"><!-- react-text: 425 -->dataSource<!-- /react-text --></code><!-- react-text: 426 --> property.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="427"></i></section><section class="highlight-wrapper" data-reactid="428"><div class="highlight" data-reactid="429"><i class="anticon anticon-copy code-box-code-copy" data-reactid="430"></i><pre class="language-jsx" data-reactid="431"><code data-reactid="432"><span class="token keyword">import</span> <span class="token punctuation">{</span> Icon<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> AutoComplete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> AutoComplete<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">const</span> OptGroup <span class="token operator">=</span> AutoComplete<span class="token punctuation">.</span>OptGroup<span class="token punctuation">;</span>
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'话题'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'AntDesign'</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token number">10000</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'AntDesign UI'</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token number">10600</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'问题'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'AntDesign UI 有多好'</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token number">60100</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'AntDesign 是啥'</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token number">30010</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'文章'</span><span class="token punctuation">,</span>
children<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'AntDesign 是一个设计语言'</span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token number">100000</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">renderTitle</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>title<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> float<span class="token punctuation">:</span> <span class="token string">'right'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://www.google.com/search?q<span class="token punctuation">=</span>antd<span class="token punctuation">"</span></span>
<span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span>
<span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>noopener</span> <span class="token attr-name">noreferrer"</span>
<span class="token punctuation">></span></span>更多
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> options <span class="token operator">=</span> dataSource<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>group <span class="token operator">=</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>OptGroup</span>
<span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>group<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span>
<span class="token attr-name">label</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token function">renderTitle</span><span class="token punctuation">(</span>group<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>group<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>opt <span class="token operator">=</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>opt<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>opt<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>opt<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>certain-search-item-count<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>opt<span class="token punctuation">.</span>count<span class="token punctuation">}</span> 人 关注<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>OptGroup</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">disabled</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>all<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>show-all<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span>
<span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://www.google.com/search?q<span class="token punctuation">=</span>antd<span class="token punctuation">"</span></span>
<span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span>
<span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>noopener</span> <span class="token attr-name">noreferrer"</span>
<span class="token punctuation">></span></span>查看所有结果<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>certain-category-search-wrapper<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">250</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>certain-category-search<span class="token punctuation">"</span></span>
<span class="token attr-name">dropdownClassName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>certain-category-search-dropdown<span class="token punctuation">"</span></span>
<span class="token attr-name">dropdownMatchSelectWidth</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">dropdownStyle</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">here"</span>
<span class="token attr-name">optionLabelProp</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span> <span class="token attr-name">suffix={&lt;Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>certain-category-icon<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>AutoComplete</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Complete</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="433"><pre data-reactid="434"><code class="css" data-reactid="435"><span class="token selector"><span class="token class">.certain-category-search.ant-select-auto-complete</span> <span class="token class">.ant-input-preSuffix-wrapper</span> <span class="token class">.ant-input-suffix</span> </span><span class="token punctuation">{</span>
<span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-search-dropdown</span> <span class="token class">.ant-select-dropdown-menu-item-group-title</span> </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#666</span><span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-search-dropdown</span> <span class="token class">.ant-select-dropdown-menu-item-group</span> </span><span class="token punctuation">{</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#F6F6F6</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-search-dropdown</span> <span class="token class">.ant-select-dropdown-menu-item</span> </span><span class="token punctuation">{</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-search-dropdown</span> <span class="token class">.ant-select-dropdown-menu-item.show-all</span> </span><span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">cursor</span><span class="token punctuation">:</span> default<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-search-dropdown</span> <span class="token class">.ant-select-dropdown-menu</span> </span><span class="token punctuation">{</span>
<span class="token property">max-height</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-search-item-count</span> </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-search.ant-select-focused</span> <span class="token class">.certain-category-icon</span> </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#108ee9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.certain-category-icon</span> </span><span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#6E6E6E</span><span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">0.3</span>s <span class="token function">cubic-bezier</span><span class="token punctuation">(</span><span class="token number">0.645</span>, <span class="token number">0.045</span>, <span class="token number">0.355</span>, <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="436"><section class="code-box" id="components-auto-complete-demo-options" data-reactid="437"><section class="code-box-demo" data-reactid="438"><div style="width:200px;" class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" data-reactid="439"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="440"><div class="ant-select-selection__rendered" data-reactid="441"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="442">input here</div><ul data-reactid="443"><li class="ant-select-search ant-select-search--inline" data-reactid="444"><div class="ant-select-search__field__wrap" data-reactid="445"><input type="text" class="ant-input ant-input ant-select-search__field" value="" data-reactid="446"/><span class="ant-select-search__field__mirror" data-reactid="447"><!-- react-text: 448 --><!-- /react-text --><!-- react-text: 449 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="450"><b data-reactid="451"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="452"><div class="code-box-title" data-reactid="453"><a href="#components-auto-complete-demo-options" data-reactid="454">Customized</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/demo/options.md" data-reactid="455"><i class="anticon anticon-edit" data-reactid="456"></i></a></div><div data-reactid="457"><p data-reactid="458"><!-- react-text: 459 -->You could pass <!-- /react-text --><code data-reactid="460"><!-- react-text: 461 -->AutoComplete.Option<!-- /react-text --></code><!-- react-text: 462 --> as children of <!-- /react-text --><code data-reactid="463"><!-- react-text: 464 -->AutoComplete<!-- /react-text --></code><!-- react-text: 465 -->, instead of using <!-- /react-text --><code data-reactid="466"><!-- react-text: 467 -->dataSource<!-- /react-text --></code><!-- react-text: 468 -->。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="469"></i></section><section class="highlight-wrapper" data-reactid="470"><div class="highlight" data-reactid="471"><i class="anticon anticon-copy code-box-code-copy" data-reactid="472"></i><pre class="language-jsx" data-reactid="473"><code data-reactid="474"><span class="token keyword">import</span> <span class="token punctuation">{</span> AutoComplete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> AutoComplete<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">Complete</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
result<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> result<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value <span class="token operator">||</span> value<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'@'</span><span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'gmail.com'</span><span class="token punctuation">,</span> <span class="token string">'163.com'</span><span class="token punctuation">,</span> <span class="token string">'qq.com'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>domain <span class="token operator">=</span><span class="token operator">></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">@</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>domain<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> result <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> result <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">const</span> children <span class="token operator">=</span> result<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>email<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>email<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">here"</span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>children<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>AutoComplete</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Complete</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-auto-complete-demo-non-case-sensitive" data-reactid="475"><section class="code-box-demo" data-reactid="476"><div style="width:200px;" class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" data-reactid="477"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="478"><div class="ant-select-selection__rendered" data-reactid="479"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="480">try to type `b`</div><ul data-reactid="481"><li class="ant-select-search ant-select-search--inline" data-reactid="482"><div class="ant-select-search__field__wrap" data-reactid="483"><input type="text" class="ant-input ant-input ant-select-search__field" value="" data-reactid="484"/><span class="ant-select-search__field__mirror" data-reactid="485"><!-- react-text: 486 --><!-- /react-text --><!-- react-text: 487 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="488"><b data-reactid="489"></b></span></div></div></section><section class="code-box-meta markdown" data-reactid="490"><div class="code-box-title" data-reactid="491"><a href="#components-auto-complete-demo-non-case-sensitive" data-reactid="492">Non-case-sensitive AutoComplete</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/demo/non-case-sensitive.md" data-reactid="493"><i class="anticon anticon-edit" data-reactid="494"></i></a></div><div data-reactid="495"><p data-reactid="496"><!-- react-text: 497 -->A non-case-sensitive AutoComplete<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="498"></i></section><section class="highlight-wrapper" data-reactid="499"><div class="highlight" data-reactid="500"><i class="anticon anticon-copy code-box-code-copy" data-reactid="501"></i><pre class="language-jsx" data-reactid="502"><code data-reactid="503"><span class="token keyword">import</span> <span class="token punctuation">{</span> AutoComplete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Burns Bay Road'</span><span class="token punctuation">,</span> <span class="token string">'Downing Street'</span><span class="token punctuation">,</span> <span class="token string">'Wall Street'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>try</span> <span class="token attr-name">to</span> <span class="token attr-name">type</span> <span class="token attr-name">`b`"</span>
<span class="token attr-name">filterOption</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">,</span> option<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> option<span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Complete</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-auto-complete-demo-uncertain-category" data-reactid="504"><section class="code-box-demo" data-reactid="505"><div class="global-search-wrapper" style="width:300px;" data-reactid="506"><div style="width:100%;" class="ant-select-lg ant-select-lg global-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled" data-reactid="507"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="508"><div class="ant-select-selection__rendered" data-reactid="509"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="510">input here</div><ul data-reactid="511"><li class="ant-select-search ant-select-search--inline" data-reactid="512"><div class="ant-select-search__field__wrap" data-reactid="513"><span class="ant-input-preSuffix-wrapper" data-reactid="514"><input type="text" class="ant-input ant-input ant-select-search__field" value="" data-reactid="515"/><span class="ant-input-suffix" data-reactid="516"><button type="button" class="ant-btn ant-btn-primary ant-btn-lg search-btn" data-reactid="517"><i class="anticon anticon-search" data-reactid="518"></i></button></span></span><span class="ant-select-search__field__mirror" data-reactid="519"><!-- react-text: 520 --><!-- /react-text --><!-- react-text: 521 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="522"><b data-reactid="523"></b></span></div></div></div><style data-reactid="524">.global-search-wrapper {
padding-right: 50px;
}
.global-search {
width: 100%;
}
.global-search.ant-select-auto-complete .ant-select-selection--single {
margin-right: -46px;
}
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) {
padding-right: 62px;
}
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix {
right: 0;
}
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.global-search-item-count {
position: absolute;
right: 16px;
}</style></section><section class="code-box-meta markdown" data-reactid="525"><div class="code-box-title" data-reactid="526"><a href="#components-auto-complete-demo-uncertain-category" data-reactid="527">Lookup-Patterns - Uncertain Category</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/auto-complete/demo/uncertain-category.md" data-reactid="528"><i class="anticon anticon-edit" data-reactid="529"></i></a></div><div data-reactid="530"><p data-reactid="531"><!-- react-text: 532 -->Demonstration of <!-- /react-text --><a href="https://ant.design/docs/spec/reaction#Lookup-Patterns" data-reactid="533"><!-- react-text: 534 -->Lookup Patterns: Uncertain Category<!-- /react-text --></a><!-- react-text: 535 -->.
Basic Usage, set datasource of autocomplete with <!-- /react-text --><code data-reactid="536"><!-- react-text: 537 -->dataSource<!-- /react-text --></code><!-- react-text: 538 --> property.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="539"></i></section><section class="highlight-wrapper" data-reactid="540"><div class="highlight" data-reactid="541"><i class="anticon anticon-copy code-box-code-copy" data-reactid="542"></i><pre class="language-jsx" data-reactid="543"><code data-reactid="544"><span class="token keyword">import</span> <span class="token punctuation">{</span> Icon<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> AutoComplete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Option <span class="token operator">=</span> AutoComplete<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">onSelect</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSelect'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">getRandomInt</span><span class="token punctuation">(</span>max<span class="token punctuation">,</span> min <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>max <span class="token operator">-</span> min <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> min<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// eslint-disable-line no-mixed-operators</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">searchResult</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token function">getRandomInt</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> idx<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
query<span class="token punctuation">,</span>
category<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>query<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>idx<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
count<span class="token punctuation">:</span> <span class="token function">getRandomInt</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">renderOption</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>category<span class="token punctuation">}</span></span> <span class="token attr-name">text</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>category<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span>item<span class="token punctuation">.</span>query<span class="token punctuation">}</span> 在
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span>
<span class="token attr-name">href</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`https://s.taobao.com/search?q=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>query<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span></span>
<span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span>
<span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>noopener</span> <span class="token attr-name">noreferrer"</span>
<span class="token punctuation">></span></span>
<span class="token punctuation">{</span>item<span class="token punctuation">.</span>category<span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
区块中
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>global-search-item-count<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>约 <span class="token punctuation">{</span>item<span class="token punctuation">.</span>count<span class="token punctuation">}</span> 个结果<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Complete</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> value <span class="token operator">?</span> <span class="token function">searchResult</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> dataSource <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>global-search-wrapper<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">300</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span>
<span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>global-search<span class="token punctuation">"</span></span>
<span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>renderOption<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onSelect</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onSelect<span class="token punctuation">}</span></span>
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input</span> <span class="token attr-name">here"</span>
<span class="token attr-name">optionLabelProp</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Input</span>
<span class="token attr-name">suffix</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search-btn<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>AutoComplete</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Complete</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="545"><pre data-reactid="546"><code class="css" data-reactid="547"><span class="token selector"><span class="token class">.global-search-wrapper</span> </span><span class="token punctuation">{</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.global-search</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.global-search.ant-select-auto-complete</span> <span class="token class">.ant-select-selection--single</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> -<span class="token number">46</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.global-search.ant-select-auto-complete</span> <span class="token class">.ant-input-preSuffix-wrapper</span> <span class="token class">.ant-input</span><span class="token pseudo-class">:not(:last-child)</span> </span><span class="token punctuation">{</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token number">62</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.global-search.ant-select-auto-complete</span> <span class="token class">.ant-input-preSuffix-wrapper</span> <span class="token class">.ant-input-suffix</span> </span><span class="token punctuation">{</span>
<span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.global-search.ant-select-auto-complete</span> <span class="token class">.ant-input-preSuffix-wrapper</span> <span class="token class">.ant-input-suffix</span> button </span><span class="token punctuation">{</span>
<span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.global-search-item-count</span> </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="548"><h2 id="API" data-reactid="549"><span data-reactid="550"><!-- react-text: 551 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="552">#</a></h2><pre class="language-jsx" data-reactid="553"><code data-reactid="554"><span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'12345'</span><span class="token punctuation">,</span> <span class="token string">'23456'</span><span class="token punctuation">,</span> <span class="token string">'34567'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AutoComplete</span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span></code></pre><table data-reactid="555"><thead data-reactid="556"><tr data-reactid="557"><th data-reactid="558"><!-- react-text: 559 -->Property<!-- /react-text --></th><th data-reactid="560"><!-- react-text: 561 -->Description<!-- /react-text --></th><th data-reactid="562"><!-- react-text: 563 -->Type<!-- /react-text --></th><th data-reactid="564"><!-- react-text: 565 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="566"><tr data-reactid="567"><td data-reactid="568"><!-- react-text: 569 -->dataSource<!-- /react-text --></td><td data-reactid="570"><!-- react-text: 571 -->Data source for autocomplete<!-- /react-text --></td><td data-reactid="572"><a href="https://git.io/vMMKF" data-reactid="573"><!-- react-text: 574 -->DataSourceItemType<!-- /react-text --></a><!-- react-text: 575 -->[]<!-- /react-text --></td><td data-reactid="576"></td></tr><tr data-reactid="577"><td data-reactid="578"><!-- react-text: 579 -->value<!-- /react-text --></td><td data-reactid="580"><!-- react-text: 581 -->selected option<!-- /react-text --></td><td data-reactid="582"><!-- react-text: 583 -->string<!-- /react-text --><!-- react-text: 584 -->|<!-- /react-text --><!-- react-text: 585 -->string[]<!-- /react-text --><!-- react-text: 586 -->|<!-- /react-text --><!-- react-text: 587 -->{ key: string, label: string<!-- /react-text --><!-- react-text: 588 -->|<!-- /react-text --><!-- react-text: 589 -->ReactNode }<!-- /react-text --><!-- react-text: 590 -->|<!-- /react-text --><!-- react-text: 591 -->Array&lt;{ key: string, label: string<!-- /react-text --><!-- react-text: 592 -->|<!-- /react-text --><!-- react-text: 593 -->ReactNode }&gt;<!-- /react-text --></td><td data-reactid="594"><!-- react-text: 595 -->-<!-- /react-text --></td></tr><tr data-reactid="596"><td data-reactid="597"><!-- react-text: 598 -->defaultValue<!-- /react-text --></td><td data-reactid="599"><!-- react-text: 600 -->Initial selected option.<!-- /react-text --></td><td data-reactid="601"><!-- react-text: 602 -->string<!-- /react-text --><!-- react-text: 603 -->|<!-- /react-text --><!-- react-text: 604 -->string[]<!-- /react-text --><!-- react-text: 605 -->|<!-- /react-text --><!-- react-text: 606 -->{ key: string, label: string<!-- /react-text --><!-- react-text: 607 -->|<!-- /react-text --><!-- react-text: 608 -->ReactNode }<!-- /react-text --><!-- react-text: 609 -->|<!-- /react-text --><!-- react-text: 610 -->Array&lt;{ key: string, label: string<!-- /react-text --><!-- react-text: 611 -->|<!-- /react-text --><!-- react-text: 612 -->ReactNode }&gt;<!-- /react-text --></td><td data-reactid="613"><!-- react-text: 614 -->-<!-- /react-text --></td></tr><tr data-reactid="615"><td data-reactid="616"><!-- react-text: 617 -->allowClear<!-- /react-text --></td><td data-reactid="618"><!-- react-text: 619 -->Show clear button, effective in multiple mode only.<!-- /react-text --></td><td data-reactid="620"><!-- react-text: 621 -->boolean<!-- /react-text --></td><td data-reactid="622"><!-- react-text: 623 -->false<!-- /react-text --></td></tr><tr data-reactid="624"><td data-reactid="625"><!-- react-text: 626 -->onChange<!-- /react-text --></td><td data-reactid="627"><!-- react-text: 628 -->Called when select an option or input value change, or value of input is changed<!-- /react-text --></td><td data-reactid="629"><!-- react-text: 630 -->function(value, label)<!-- /react-text --></td><td data-reactid="631"><!-- react-text: 632 -->-<!-- /react-text --></td></tr><tr data-reactid="633"><td data-reactid="634"><!-- react-text: 635 -->onSelect<!-- /react-text --></td><td data-reactid="636"><!-- react-text: 637 -->Called when a option is selected. param is option&#x27;s value and option instance.<!-- /react-text --></td><td data-reactid="638"><!-- react-text: 639 -->function(value, option)<!-- /react-text --></td><td data-reactid="640"><!-- react-text: 641 -->-<!-- /react-text --></td></tr><tr data-reactid="642"><td data-reactid="643"><!-- react-text: 644 -->disabled<!-- /react-text --></td><td data-reactid="645"><!-- react-text: 646 -->Whether disabled select<!-- /react-text --></td><td data-reactid="647"><!-- react-text: 648 -->boolean<!-- /react-text --></td><td data-reactid="649"><!-- react-text: 650 -->false<!-- /react-text --></td></tr><tr data-reactid="651"><td data-reactid="652"><!-- react-text: 653 -->defaultActiveFirstOption<!-- /react-text --></td><td data-reactid="654"><!-- react-text: 655 -->Whether active first option by default<!-- /react-text --></td><td data-reactid="656"><!-- react-text: 657 -->boolean<!-- /react-text --></td><td data-reactid="658"><!-- react-text: 659 -->true<!-- /react-text --></td></tr><tr data-reactid="660"><td data-reactid="661"><!-- react-text: 662 -->placeholder<!-- /react-text --></td><td data-reactid="663"><!-- react-text: 664 -->placeholder of input<!-- /react-text --></td><td data-reactid="665"><!-- react-text: 666 -->string<!-- /react-text --></td><td data-reactid="667"><!-- react-text: 668 -->-<!-- /react-text --></td></tr><tr data-reactid="669"><td data-reactid="670"><!-- react-text: 671 -->children (for dataSource)<!-- /react-text --></td><td data-reactid="672"><!-- react-text: 673 -->Data source for autocomplet<!-- /react-text --></td><td data-reactid="674"><!-- react-text: 675 -->React.ReactElement<!-- /react-text --><optionprops data-reactid="676"></optionprops><!-- react-text: 677 --> / Array&lt;React.ReactElement<!-- /react-text --><optionprops data-reactid="678"></optionprops><!-- react-text: 679 -->&gt;<!-- /react-text --></td><td data-reactid="680"><!-- react-text: 681 -->-<!-- /react-text --></td></tr><tr data-reactid="682"><td data-reactid="683"><!-- react-text: 684 -->children (for customize input element)<!-- /react-text --></td><td data-reactid="685"><!-- react-text: 686 -->customize input element<!-- /react-text --></td><td data-reactid="687"><!-- react-text: 688 -->HTMLInputElement / HTMLTextAreaElement / React.ReactElement<!-- /react-text --><inputprops data-reactid="689"></inputprops></td><td data-reactid="690"><code data-reactid="691"><!-- react-text: 692 -->&lt;Input /&gt;<!-- /react-text --></code></td></tr><tr data-reactid="693"><td data-reactid="694"><!-- react-text: 695 -->optionLabelProp<!-- /react-text --></td><td data-reactid="696"><!-- react-text: 697 -->Which prop value of option will render as content of select.<!-- /react-text --></td><td data-reactid="698"><!-- react-text: 699 -->string<!-- /react-text --></td><td data-reactid="700"><code data-reactid="701"><!-- react-text: 702 -->children<!-- /react-text --></code></td></tr><tr data-reactid="703"><td data-reactid="704"><!-- react-text: 705 -->filterOption<!-- /react-text --></td><td data-reactid="706"><!-- react-text: 707 -->If true, filter options by input, if function, filter options against it. The function will receive two arguments, <!-- /react-text --><code data-reactid="708"><!-- react-text: 709 -->inputValue<!-- /react-text --></code><!-- react-text: 710 --> and <!-- /react-text --><code data-reactid="711"><!-- react-text: 712 -->option<!-- /react-text --></code><!-- react-text: 713 -->, if the function returns <!-- /react-text --><code data-reactid="714"><!-- react-text: 715 -->true<!-- /react-text --></code><!-- react-text: 716 -->, the option will be included in the filtered set; Otherwise, it will be excluded.<!-- /react-text --></td><td data-reactid="717"><!-- react-text: 718 -->boolean or function(inputValue, option)<!-- /react-text --></td><td data-reactid="719"><!-- react-text: 720 -->true<!-- /react-text --></td></tr></tbody></table></section></article></div></div><div class="ant-row" data-reactid="721"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="722"><section class="prev-next-nav" data-reactid="723"><a class="prev-page" href="/components/tabs/" data-reactid="724"><span data-reactid="725">Tabs</span><span class="chinese" data-reactid="726"></span></a><a class="next-page" href="/components/cascader/" data-reactid="727"><span data-reactid="728">Cascader</span><span class="chinese" data-reactid="729"></span></a></section></div></div></div><footer id="footer" data-reactid="730"><ul data-reactid="731"><li data-reactid="732"><h2 data-reactid="733"><i class="anticon anticon-github" data-reactid="734"></i><!-- react-text: 735 --> GitHub<!-- /react-text --></h2><div data-reactid="736"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="737"><span data-reactid="738">Repository</span></a></div><div data-reactid="739"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="740"><span data-reactid="741">Customize Theme</span></a></div><div data-reactid="742"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="743"><span data-reactid="744">Awesome Ant Design</span></a></div></li><li data-reactid="745"><h2 data-reactid="746"><i class="anticon anticon-link" data-reactid="747"></i><!-- react-text: 748 --> <!-- /react-text --><span data-reactid="749">Links</span></h2><div data-reactid="750"><a href="http://mobile.ant.design" data-reactid="751">Ant Design Mobile</a><span data-reactid="752"> - </span><span data-reactid="753">Mobile UI</span></div><div data-reactid="754"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="755">dva</a><!-- react-text: 756 --> - <!-- /react-text --><span data-reactid="757">Framework</span></div><div data-reactid="758"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="759">dva-cli</a><!-- react-text: 760 --> -<!-- /react-text --><span data-reactid="761">Developer Tools</span></div><div data-reactid="762"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="763">Egg</a><span data-reactid="764"> - </span><span data-reactid="765">Enterprise Node Framework</span></div><div data-reactid="766"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="767">AntV</a><span data-reactid="768"> - </span><span data-reactid="769">Data Visualization</span></div><div data-reactid="770"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="771">Ant Motion</a><span data-reactid="772"> - </span><span data-reactid="773">Motion Soluction</span></div><div data-reactid="774"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="775">AntD Library</a><span data-reactid="776"> - </span><span data-reactid="777">Axure library</span></div><div data-reactid="778"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="779">Ant UX</a><span data-reactid="780"> - </span><span data-reactid="781">Sitemap Template</span></div></li><li data-reactid="782"><h2 data-reactid="783"><i class="anticon anticon-customer-service" data-reactid="784"></i><!-- react-text: 785 --> <!-- /react-text --><span data-reactid="786">Community</span></h2><div data-reactid="787"><a href="/changelog" data-reactid="788"><span data-reactid="789">Change Log</span></a></div><div data-reactid="790"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="791"><span data-reactid="792">FAQ</span></a></div><div data-reactid="793"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="794"><span data-reactid="795">Chat Room</span></a></div><div data-reactid="796"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="797"><span data-reactid="798">Bug Report</span></a></div><div data-reactid="799"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="800"><span data-reactid="801">StackOverflow</span></a></div><div data-reactid="802"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="803"><span data-reactid="804">SegmentFault</span></a></div></li><li data-reactid="805"><h2 data-reactid="806"><!-- react-text: 807 -->Copyright © <!-- /react-text --><!-- react-text: 808 -->2017<!-- /react-text --></h2><div data-reactid="809"><span data-reactid="810">Created by Ant UED</span></div><div data-reactid="811"><!-- react-text: 812 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="813">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink