自动完成
自动完成组件是一个输入字段，在商家输入时提供可选择的建议。它允许商家快速搜索并从大量选项中进行选择。这是一个方便的包装组合框而且列表框UI差异较小的组件。
用于帮助商家从选项列表中快速完成文本输入。
进口｛自动完成，图标｝从“@shopify /北极星”；进口｛SearchMinor｝从“@shopify / polaris-icons”；进口｛useState，useCallback，useMemo｝从“反应”；函数AutocompleteExample（）｛常量deselectedOptions＝useMemo（（）= >［｛价值:“乡村”，标签:“乡村”｝，｛价值:“古董”，标签:“古董”｝，｛价值:乙烯基的，标签:乙烯基的｝，｛价值:“古董”，标签:“古董”｝，｛价值:“翻新”，标签:“翻新”｝，］，［］，）；常量［selectedOptions，setSelectedOptions］＝useState（［］）；常量［inputValue，setInputValue］＝useState（”）；常量［选项，setoption］＝useState（deselectedOptions）；常量updateText＝useCallback（（价值）= >｛setInputValue（价值）；如果（价值= = =”）｛setoption（deselectedOptions）；返回；｝常量filterRegex＝新正则表达式（价值，“我”）；常量resultOptions＝deselectedOptions．过滤器（（选项）= >选项．标签．匹配（filterRegex），）；setoption（resultOptions）；｝，［deselectedOptions］，）；常量updateSelection＝useCallback（（选择）= >｛常量selectedValue＝选择．地图（（设置selectedItem）= >｛常量matchedOption＝选项．找到（（选项）= >｛返回选项．价值．匹配（设置selectedItem）；｝）；返回matchedOption& &matchedOption．标签；｝）；setSelectedOptions（选择）；setInputValue（selectedValue［0］）；｝，［选项］，）；常量文本框＝（<自动完成．TextField onChange＝｛updateText｝标签＝“标签”价值＝｛inputValue｝前缀＝｛<图标的源＝｛SearchMinor｝颜色＝“基地”/>｝占位符＝“搜索”/>）；返回（<div风格＝｛｛高度:“225 px”｝｝><自动完成选项＝｛选项｝选择＝｛selectedOptions｝onSelect＝｛updateSelection｝文本框＝｛文本框｝/></div>）；｝道具
想让这个功能变得更好吗?请分享你的反馈．
接口
AutocompleteProps
- id? 字符串
-
自动完成的唯一标识符。
- 选项 [] |［］
-
要列出的选项集合。
- 选择 字符串［］
-
所选的选项。
- 文本框 反应．ReactElement
-
附加到选项列表的文本字段组件。
- preferredPosition? “以上”|“下面”|“mostSpace”
-
弹出窗口的首选打开方向。
- listTitle? 字符串
-
选项列表的标题。
- allowMultiple? 布尔
-
允许选择多个选项。
- actionBefore? & {wrapOverflow?：布尔；｝
-
在选项列表上方呈现的操作。
- 加载? 布尔
-
显示加载状态。
- willLoadMoreResults? 布尔
-
指示是否动态加载更多的结果。
- emptyState? 反应．ReactNode
-
在没有选项时呈现。
- onSelect （选择:字符串[]) = >无效
-
当选项的选择发生改变时，回调函数。
- onLoadMoreResults? ()= >无效
-
当到达列表末尾时，回调。
最佳实践
自动完成组件应该:
- 要有清晰的标签，这样商家就能清楚地看到有什么样的选择
- 限制一次显示的选项数量
- 不能在弹窗内使用
- 在填充选项数据时，向商家指示加载状态
内容的指导方针
自动完成的输入字段应该在内容的指导方针对于文本字段。
相关的组件
可访问性
结构
自动完成组件基于ARIA 1.2组合框模式和Aria 1.2列表框模式．
自动完成列表默认显示在文本字段或其他控件的下方，因此很容易被商家发现和使用。但是，您可以使用preferredPosition道具。
自动补全功能对于有视觉、运动和认知障碍的商人来说是一个挑战。即使使用最佳实践构建这些特性，也很难与一些辅助技术一起使用。商家应该总是能够搜索，输入数据，或执行其他活动，而不依赖于自动完成功能。
做
使用自动补全作为逐步增强，使界面更容易为大多数商家使用。
不
要求商家从自动完成中做出选择来完成一个任务。
键盘支持
- 给出自动完成文本输入键盘的焦点选项卡键(或转变+选项卡当向后移动)
- 使用向上和向下方向键访问选项列表
- 选择具有焦点的选项输入/返回关键