{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/autocomplete","result":{"data":{"current":{"frontmatter":{"title":"AutoComplete","order":35,"brief":"The input box is automatically filled.","icon":"doc-autocomplete"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#custom-option-rendering","title":"Custom option rendering"},{"url":"#remote-search","title":"Remote search"},{"url":"#size","title":"Size"},{"url":"#the-position-of-the-drop-down-menu","title":"The position of the drop-down menu"},{"url":"#disabled","title":"Disabled"},{"url":"#validate-status","title":"Validate status"},{"url":"#custom-empty-content","title":"Custom empty content"}]},{"url":"#api-reference","title":"API reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-token","title":"Design Token"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 35,\n \"category\": \"Input\",\n \"title\": \"AutoComplete\",\n \"icon\": \"doc-autocomplete\",\n \"brief\": \"The input box is automatically filled.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"When to use\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Used to provide input suggestions to the input box and perform automatic completion operations\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The difference with the searchable Select component:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"AutoComplete is essentially an enhanced Input component that provides input suggestions, while Select is a selector\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When you click to expand, Select will clear all the values in the input box, and AutoComplete will keep the last selected value\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Select's selected item rendering (renderSelectedItem) can be more customized and can be any type of ReactNode, while AutoComplete only allows strings\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { AutoComplete } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Monitor user input through onSearch, pass input suggestions through data, and maintain control through onChange. OnChange is triggered when the input box changes/selects an input item\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [stringData, setStringData] = useState([]);\\n const [value, setValue] = useState('');\\n const handleStringSearch = (value) => {\\n let result;\\n if (value) {\\n result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);\\n } else {\\n result = [];\\n }\\n setStringData(result);\\n };\\n\\n const handleChange = (value) => {\\n console.log('onChange', value);\\n setValue(value);\\n };\\n return (\\n }\\n placeholder=\\\"Search... \\\"\\n onSearch={handleStringSearch}\\n onChange={handleChange}\\n style={{ width: 200 }}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom option rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When you need to customize the rendering of candidates, data can be passed in an array of objects (each Object must contain two keys, label and value, value is the value selected by the candidate, and label is the content displayed by the candidate)\\nThe rendering of candidates can be customized through renderItem\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { AutoComplete, Avatar } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [data, setData] = useState([]);\\n const color = ['amber', 'indigo', 'cyan'];\\n const list = [\\n { name: 'Xia', email: 'xiakeman@example.com', abbr: 'XK', color: 'amber' },\\n { name: 'Shen', email: 'shenyue@example.com', abbr: 'SY', color: 'indigo' },\\n { name: 'Qu', email: 'quchenyi@example.com', abbr: 'CY', color: 'blue' },\\n { name: 'Wen', email: 'wenjiamao@example.com', abbr: 'JM', color: 'cyan' },\\n ];\\n\\n const search = (value) => {\\n let result;\\n if (value) {\\n result = list.map(item => {\\n return { ...item, value: item.name, label: item.email };\\n });\\n } else {\\n result = [];\\n }\\n setData(result);\\n };\\n\\n const renderOption = (item) => {\\n let optionStyle = {\\n display: 'flex',\\n };\\n return (\\n <>\\n \\n {item.abbr}\\n \\n
\\n
{item.name}
\\n
{item.email}
\\n
\\n \\n );\\n };\\n\\n return (\\n }\\n style={{ width: '250px' }}\\n renderSelectedItem={option => option.email}\\n renderItem={renderOption}\\n onSearch={search}\\n onSelect={v => console.log(v)}\\n >\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Remote search\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Get user input value from onSearch, update data value dynamically, update loading\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState, useRef } from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [list, setList] = useState([\\n { value: 'abc', label: 'douyin', email: '1@gmail.com', type: 2 },\\n { value: 'hotsoon', label: 'huoshan', email: '2@gmail.com', type: 3 },\\n { value: 'pipixia', label: 'pip', email: '3@gmail.com' },\\n ]);\\n const [loading, setLoading] = useState(false);\\n const timeoutRef = useRef(null);\\n\\n const search = (inputValue) => {\\n const newList = list.map(item => {\\n let num = Math.random()\\n .toString()\\n .slice(2, 5);\\n let option = inputValue + '-' + num;\\n return { ...item, label: 'Name:' + option, value: option };\\n });\\n setList(newList);\\n setLoading(false);\\n };\\n\\n const onSearch = (inputValue) => {\\n setLoading(true);\\n if (timeoutRef.current) {\\n clearTimeout(timeoutRef.current);\\n }\\n timeoutRef.current = setTimeout(() => {\\n search(inputValue);\\n }, 200);\\n };\\n\\n const handleSelect = (value) => {\\n console.log(value);\\n };\\n\\n const renderItem = (item) => {\\n return (\\n
\\n
{item.label}
\\n
email: {item.email}
\\n
value: {item.value}
\\n
\\n );\\n };\\n\\n const renderSelectedItem = (item) => {\\n // Note: Unlike Select, only String type values can be returned here, ReactNode cannot be returned\\n return item.value;\\n };\\n\\n return (\\n
\\n }\\n onSearch={onSearch}\\n loading={loading}\\n onChangeWithObject\\n renderItem={renderItem}\\n renderSelectedItem={renderSelectedItem}\\n onSelect={handleSelect}\\n >\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Size\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The size of the input box can be set by setting size, optional \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \" (default), \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"large\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\n\\n() => (\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"The position of the drop-down menu\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The position of the drop-down menu can be set by setting position, and the optional values refer to Tooltip position\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\n\\n() => (\\n
\\n \\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disabled\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Validate status\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Different verification states can be set to show different styles\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { AutoComplete } from '@douyinfe/semi-ui';\\n\\n() => (\\n <>\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom empty content\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Can set up custom display empty content\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { AutoComplete, Empty } from '@douyinfe/semi-ui';\\nimport { IllustrationNoContent } from '@douyinfe/semi-illustrations';\\n\\n() => {\\n let [data, setData] = useState([]);\\n const [loading, setLoading] = useState(false);\\n\\n const fetchData = v => {\\n setLoading(true);\\n setTimeout(() => {\\n if (!v) {\\n setData([]);\\n setLoading(false);\\n return;\\n }\\n setData(() => {\\n const res = Array.from(Array(5)).map(c => Math.random());\\n return res;\\n });\\n setLoading(false);\\n }, 1000);\\n };\\n\\n return (\\n } description={'no content yet'} />}\\n onSearch={fetchData}\\n />\\n );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API reference\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Version\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to auto focus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bool\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoAdjustOverflow\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to automatically adjust the direction when the floating layer is blocked\", mdx(\"br\", null)), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bool\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"clearIcon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Can be used to customize the clear button, valid when showClear is true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.25.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"data\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The data source of the candidates, which can be a string array or an object array\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"array\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultActiveFirstOption\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to highlight the first option by default (press enter to select directly)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bool\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultOpen\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to expand the drop-down menu by default\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Defaults\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to disable\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Css class name of the drop-down list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dropdownStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style of the drop-down list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"emptyContent\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the drop-down content when data is empty\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"null\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getPopupContainer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Specify the parent DOM, the floating layer of the drop-down list will be rendered into the DOM, and the customization needs to set \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"position: relative\"), \" This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => HTMLElement\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => document.body\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"loading\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether the drop-down list shows loading animation\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"maxHeight\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The maximum height of the drop-down list\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\", \"|\", \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"300\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"motion\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Is there an animation when the drop-down list appears/hidden\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSelectWithObject\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"When clicking on the candidate, whether to add other attributes of the selected item option as callback parameters. When set to true, the input parameter type of onSelect will change from \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"string\"), \" to object: {value, label, ...rest}\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"placeholder\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Input box prompt\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"position\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The display position of the drop-down menu, the optional values are the same as the tooltip component\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'bottomLeft'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"prefix\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The prefix tag of the select box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderItem\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Control the rendering of drop-down list candidates\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(option: string\", \"|\", \"Item)=> React.Node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderSelectedItem\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the drop-down list through renderSelectedItem after the candidate is clicked and selected, the content rendered in the select box\", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \" only supports the return value of String type \")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(option: string\", \"|\", \"Item) => string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showClear\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to show the clear button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Size, optional \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"suffix\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The prefix tag of the select box\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The current value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"validateStatus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Validation status, optional values are \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"error\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"warning\"), \", and the default is default. Only affect the display style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'default'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"zIndex\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ZIndex of the drop-down menu\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onBlur\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when the focus is lost\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function(event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Input box change / change when the candidate is selected\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function(value:string\", \"|\", \"number)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The callback when the focus is obtained\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function(event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onKeyDown\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"keydown callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(e: React.KeyboardEvent) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.21.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when input changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function(value: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSelect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback when the drop-down menu candidate is selected\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function(item: string\", \"|\", \"number\", \"|\", \"Item)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Keyboard and Focus\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"AutoComplete's input box can be focused, and once focused, keyboard users can use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Up Arrow\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Down Arrow\"), \" to open the options panel (if there is a panel)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"AutoComplete also supports opening and closing panels via \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Enter\"), \" key\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the user sets the defaultActiveFirstOption property to true, the first option is highlighted by default when the options panel is opened\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the drop-down menu is open:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Esc\"), \" to close the menu\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Up Arrow\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Down Arrow\"), \" to toggle options\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The focused option can be selected with the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Enter\"), \" key and the panel will be collapsed\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Content needs to be presented clearly so that users can clearly perceive the options available\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Limit the number of options displayed at one time\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Token\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/autocomplete","next":{"fields":{"slug":"zh-CN/input/autocomplete"},"id":"6ed3c4cb-268d-5837-b95a-96c09c2e305f","frontmatter":{"title":"AutoComplete 自动完成","localeCode":"zh-CN","icon":"doc-autocomplete","showNew":null}},"previous":{"fields":{"slug":"zh-CN/plus/lottie"},"id":"78a728fc-4488-5b15-bc8f-87769aaf10d3","frontmatter":{"title":"Lottie 动画","localeCode":"zh-CN","icon":"doc-lottie","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}