🏇
@choc-ui/chakra-自动完成

自动完成组件 查克拉乌伊 图书馆.

Chakra V3 和 V2 支持

自动完成版本 6+ 支持 Chakra UI V3 软件。如果您正在使用 查克拉UI V2,请继续使用当前的 choc-autocomplete v5.X 这里的文档。我们将继续努力支持Chakra V2,但一旦V3得到更广泛的采用,最终将被删除.

从Chakra UI V2 迁移到V3的帮助,请查看他们的 移徙指南

Autocomplete 组件的公开API没有随此迁移而改变.

与Chakra V3的已知问题

与Chakra V3只有已知的1个显示问题. 使用时 multiple 道具,再也不能复制同样的造型了 Box 包装为 Input 正在使用。 我们仍然在研究解决这个问题的方法,但查克拉和下个主题小组尚未就此发表指导意见.

安装

npm i --save @choc-ui/chakra-autocomplete
#or
yarn add @choc-ui/chakra-autocomplete

预览

用鼠标

键盘

使用量

基本用途

import { Flex, Field } from "@chakra-ui/react";
import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from "@choc-ui/chakra-autocomplete";

function App() {
  const countries = [
    "nigeria",
    "japan",
    "india",
    "united states",
    "south korea",
  ];

  return (
    <Flex pt="48" justify="center" align="center" w="full">
      <Field.Root w="60">
        <Field.Label>Olympics Soccer Winner</Field.Label>
        <AutoComplete openOnFocus>
          <AutoCompleteInput variant="subtle" />
          <AutoCompleteList>
            {countries.map((country, cid) => (
              <AutoCompleteItem
                key={`option-${cid}`}
                value={country}
                textTransform="capitalize"
              >
                {country}
              </AutoCompleteItem>
            ))}
          </AutoCompleteList>
        </AutoComplete>
        <Field.HelperText>Who do you support.</Field.HelperText>
      </Field.Root>
    </Flex>
  );
}

export default App;

创建组

您可以创建组 AutoCompleteGroup 组件,并加上标题 AutoCompleteGroupTitle 组件.

import React from "react";
import {
  AutoComplete,
  AutoCompleteGroup,
  AutoCompleteGroupTitle,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from "@choc-ui/chakra-autocomplete";
import { Stack, Text } from "@chakra-ui/react";

export default function App() {
  const continents = {
    africa: ["nigeria", "south africa"],
    asia: ["japan", "south korea"],
    europe: ["united kingdom", "russia"],
  };
  return (
    <Stack direction="column">
      <Text>Group </Text>
      <AutoComplete openOnFocus>
        <AutoCompleteInput placeholder="Search..." variant="subtle" />
        <AutoCompleteList>
          {Object.entries(continents).map(([continent, countries], co_id) => (
            <AutoCompleteGroup key={co_id} showDivider>
              <AutoCompleteGroupTitle textTransform="capitalize">
                {continent}
              </AutoCompleteGroupTitle>
              {countries.map((country, c_id) => (
                <AutoCompleteItem
                  key={c_id}
                  value={country}
                  textTransform="capitalize"
                >
                  {country}
                </AutoCompleteItem>
              ))}
            </AutoCompleteGroup>
          ))}
        </AutoCompleteList>
      </AutoComplete>
    </Stack>
  );
}

进入内部状态

进入内部状态 AutoComplete,使用儿童功能(通常称为渲染道具). 你会进入国家内部 isOpen,与 onOpen 财务报告和审定财务报表 onClose 方法。 。 .

import {
  Flex,
  Field, 
  Icon
} from "@chakra-ui/react";
import * as React from "react";
import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from "@choc-ui/chakra-autocomplete";
import { FiChevronRight, FiChevronDown } from "react-icons/fi";
import { InputGroup } from "./components/ui/input-group";

function App() {
  const countries = [
    "nigeria",
    "japan",
    "india",
    "united states",
    "south korea",
  ];

  return (
    <Flex pt="48" justify="center" align="center" w="full">
      <Field.Root w="60">
        <Field.Label>Olympics Soccer Winner</Field.Label>
        <AutoComplete openOnFocus>
          {({ isOpen }) => (
            <>
              <InputGroup 
                endElement={<Icon>{isOpen ? <FiChevronRight /> : <FiChevronDown />}</Icon>}
              >
                <AutoCompleteInput variant="subtle" placeholder="Search..." />
              </InputGroup>
              <AutoCompleteList>
                {countries.map((country, cid) => (
                  <AutoCompleteItem
                    key={`option-${cid}`}
                    value={country}
                    textTransform="capitalize"
                  >
                    {country}
                  </AutoCompleteItem>
                ))}
              </AutoCompleteList>
            </>
          )}
        </AutoComplete>
        <Field.HelperText>Who do you support.</Field.HelperText>
      </Field.Root>
    </Flex>
  );
}

export default App;

自定义渲染

随所欲能作是念已. 这个 AutoComplete 常规项目 Chakra 箱来.

import React from "react";
import {
  AutoComplete,
  AutoCompleteGroup,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from "@choc-ui/chakra-autocomplete";
import { Stack, Text } from "@chakra-ui/react";
import { Avatar } from "./components/ui/avatar";

export default function App() {
  const europeans = [
    { name: "Dan Abramov", image: "https://bit.ly/dan-abramov" },
    { name: "Kent Dodds", image: "https://bit.ly/kent-c-dodds" },
    { name: "Ryan Florence", image: "https://bit.ly/ryan-florence" },
  ];
  const nigerians = [
    { name: "Segun Adebayo", image: "https://bit.ly/sage-adebayo" },
    { name: "Prosper Otemuyiwa", image: "https://bit.ly/prosper-baba" },
  ];
  return (
    <Stack direction="column">
      <Text>Custom Render </Text>
      <AutoComplete rollNavigation>
        <AutoCompleteInput variant="subtle" placeholder="Search..." />
        <AutoCompleteList>
          <AutoCompleteGroup title="Nigerians" showDivider>
            {nigerians.map((person, oid) => (
              <AutoCompleteItem
                key={`nigeria-${oid}`}
                value={person.name}
                textTransform="capitalize"
                align="center"
              >
                <Avatar size="sm" name={person.name} src={person.image} />
                <Text ml="4">{person.name}</Text>
              </AutoCompleteItem>
            ))}
          </AutoCompleteGroup>
          <AutoCompleteGroup title="Europeans" showDivider>
            {europeans.map((person, oid) => (
              <AutoCompleteItem
                key={`europe-${oid}`}
                value={person.name}
                textTransform="capitalize"
                align="center"
              >
                <Avatar size="sm" name={person.name} src={person.image} />
                <Text ml="4">{person.name}</Text>
              </AutoCompleteItem>
            ))}
          </AutoCompleteGroup>
        </AutoCompleteList>
      </AutoComplete>
    </Stack>
  );
}

带有标签的多选择

添加数据 multiple 向 AutoComplete 构成部分 AutoCompleteInput 现在会暴露孩子的功能. 这个 onChange prop 现在返回选中的数组 values

现在,你可以绘制标签 AutoCompleteTag 组件或您选择的任何其他组件。 这个 label 编辑 onRemove 方法现已被曝光.

重要 - 与Chakra UI V3, 已经无法复制同样的外形 Box 包装为 Input 正在使用。 我们仍然在研究解决这个问题的方法,但查克拉和下个主题小组尚未就此发表指导意见.

import React from "react";
import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
  AutoCompleteTag,
} from "@choc-ui/chakra-autocomplete";
import { Stack, Text } from "@chakra-ui/react";

export default function App() {
  const countries = [
    "nigeria",
    "japan",
    "india",
    "united states",
    "south korea",
  ];
  return (
    <Stack direction="column">
      <Text>Multi select with tags</Text>
      <AutoComplete openOnFocus multiple onChange={(vals) => console.log(vals)}>
        <AutoCompleteInput placeholder="Search..." variant="subtle">
          {({ tags }) =>
            tags.map((tag, tid) => (
              <AutoCompleteTag
                key={tid}
                label={tag.label}
                onRemove={tag.onRemove}
              />
            ))
          }
        </AutoCompleteInput>
        <AutoCompleteList>
          {countries.map((country, cid) => (
            <AutoCompleteItem
              key={`option-${cid}`}
              value={country}
              textTransform="capitalize"
              _selected={{ bg: "whiteAlpha.50" }}
              _focus={{ bg: "whiteAlpha.100" }}
            >
              {country}
            </AutoCompleteItem>
          ))}
        </AutoCompleteList>
      </AutoComplete>
    </Stack>
  );
}

可创建项目

我知道标题几乎没有表达这一点, 但是,是的,命名很困难。 您可能希望您的用户能够在提供选项中没有选项时添加额外项目 。 例如,在您的 Polywork 配置中添加新标签 .

首先增加一个 creatable 给 AutoComplete 组件. 然后添加一个 AutoCompleteCreatable 到列表底部的组件。 关于这一构成部分的更多信息,请参阅参考文献.

import React from "react";
import {
  AutoComplete,
  AutoCompleteCreatable,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
  AutoCompleteTag,
} from "@choc-ui/chakra-autocomplete";
import { Stack, Text } from "@chakra-ui/react";

export default function App() {
  const options = ["apple", "appoint", "zap", "cap", "japan"];
  return (
    <Stack direction="column">
      <Text>Creatable </Text>
      <AutoComplete multiple rollNavigation creatable>
        <AutoCompleteInput
          variant="subtle"
          placeholder="Search basic..."
          autoFocus
        >
          {({ tags }) =>
            tags.map((tag, tid) => (
              <AutoCompleteTag
                key={tid}
                label={tag.value}
                onRemove={tag.onRemove}
                disabled={tag.label === "japan"}
              />
            ))
          }
        </AutoCompleteInput>
        <AutoCompleteList>
          {options.map((option, oid) => (
            <AutoCompleteItem
              key={`option-${oid}`}
              value={option}
              textTransform="capitalize"
            >
              {option}
            </AutoCompleteItem>
          ))}
          <AutoCompleteCreatable />
        </AutoCompleteList>
      </AutoComplete>
    </Stack>
  );
}

装入状态

需要从API中提取数据,但不希望您的用户看到空白屏幕吗? 您可以通过 : isLoading 向 AutoComplete。通过这样做,将启用另外两个道具

1. loadingIcon 打开 AutoCompleteInput 将在输入的右侧显示某种装入图标。 默认a Spinner 将显示,但您可以在任何要显示的自定义元素中通过

2. loadingState 打开 AutoCompleteList 可以在 isLoading 实值 true。所有内容将放在列表的中心。 默认a Spinner 将显示,但您可以在任何要渲染的自定义元素中通过.

最佳做法是结合 setTimeout 财务报告和审定财务报表 useEffect 以产生去弹出效应。 这将防止不必要的 API 调用, 如果您的用户类型相对快 .

可以找到工作代码演示 这里

与窗体库合并

比较容易与诸如: React Hook Form, (中文(简体) ), Formik还有其他 工作实例可见于 demos 此 repo 文件夹。 见 捐款 如何复制和设置用于测试.

你最喜欢的表格库没有工作榜样吗? 提交 PR 以获得添加, 并帮助其它使用此库的人迅速起起跑 .

自动完整方法

指派一名裁判 AutoComplete 使用:

ref.current?.resetItems();
ref.current?.removeItem(itemValue);

密码箱链接 给

API 参考

编号: 请随意请求任何额外的 Prop 内 问题。 。 。 .

自动完成

包装和提供者 AutoCompleteInput 财务报告和审定财务报表 AutoCompleteList

自动完成 编曲 方框 这样你就可以通过所有Box道具来改变它的风格.

编号 : 交给它的道具都不需要.

boolean | MaybeRenderProp<{ value: Item["value"] }>

(query: string, optionValue: Item["value"], optionLabel: Item["label"]) =>
  boolean;

(value: string | Item["value"][], item: Item| Item[]) => void

(params: {
    item: Item;
    selectMethod: "mouse" | "keyboard" | null;
    isNewInput: boolean;
  }) => boolean | void

(params: {
    item: Item;
    focusMethod: "mouse" | "keyboard" | null;
    isNewInput: boolean;
  }) => boolean | void

(props:{tags:ItemTag[]}) => void

(removedTag: Item["value"],item: Item, tags: Item["value"][]) => void

(value: string) => boolean

string[]

自动补全标签

多个模式的标记

自动补全标签 编曲 标记 这样你就可以通过所有的Tag道具来改变它的风格.

string

string

() => void

自动完成输入

输入 AutoComplete 数值.

自动完成输入 编曲 投入 这样你就可以通过所有的输入道具来改变它的风格.

type children = MaybeRenderProp<{
  tags: Item & { onRemove: () => void }[];
}>;

<AutoCompleteInput variant="subtle">
  {({ tags }) =>
    tags.map((tag, tid) => (
      <AutoCompleteTag key={tid} label={tag.label} onRemove={tag.onRemove} />
    ))
  }
</AutoCompleteInput>

RefObject<HTMLInputElement>

<AutoComplete multiple creatable />

React.ReactNode | JSX

自动补全列表

包装器 AutoCompleteGroup 财务报告和审定财务报表 AutoCompleteItem

自动补全列表 编曲 方框 这样你就可以通过所有Box道具来改变它的风格.

自动完成组

用于收藏 AutoCompleteItem编号

自动完成组 编曲 方框 这样你就可以通过所有Box道具来改变它的风格.

自动完成项目

这是你的建议

自动完成项目 编曲 弹性 这样你就可以通过所有的Flex道具来改变它的风格.

val => val;

boolean

{
  fontWeight: 'extrabold',
}

boolean

{
  fontWeight: 'extrabold',
}

{
  fontWeight: 'extrabold',
}

{
  fontWeight: 'extrabold',
}

自动完成创建

用于 AutoComplete 组件的 creatable proc,允许用户输入任意值,在提供的选项中不可用.

自动完成创建 编曲 弹性 这样你就可以通过所有的Flex道具来改变它的风格.

它也接受一个功能作为它的 children 带有电流的道具 inputValue。 。 。 .

type children = MaybeRenderProp<{ value: any }>;

<AutoCompleteCreatable>
  {({ value }) => <span>Add {value} to List</span>}
</AutoCompleteCreatable>

boolean;

贡献

• 克隆此寄存器

git clone https://github.com/anubra266/choc-autocomplete.git

• 安装所有依赖( 有线条)

yarn

• 安装软件包示例依赖性( 有线条)

cd example
yarn

启动软件包服务器和示例服务器

# root directory
yarn start

# example directory with (cd example)
yarn dev

赞助者

感谢这些伟大的人emoji 密钥:

贡献者

感谢这些伟大的人emoji 密钥:

马孔·卡拉罗 💻	萨姆·马尔加利特 📖	宝石 💻 🐛	斯宾塞·凯泽 📖	贾克多戈 💻	达利乌齐乌斯 💻	法比恩·贝尔纳德 💻
里克卡多·洛伦齐 🐛	马西斯·费德里克 🐛	凯尔·斯卢瑟 💻🐛	卡尔·塞尔格伦 🐛🔧	杰迪迪亚·本霍德 🐛	亚努什·卡卡拉克 🐛	托马斯·希克曼 🐛
克里斯托弗·雷格纳 📖🐛	艾纳·斯诺拉森 💻🐛🔧	格贝穆德兹1992年 💻🐛🔧	ido213号 💻🐛🔧	比约恩·马德森 🐛	兰迪·勒博 🐛	杰维·布斯塔德 🐛🔧
伊霍尔·津琴科 🐛🔧	布赖恩·瓦伦德津斯基 🐛🔧	林克丝 🐛

本项目遵循 全部贡献者 规格。 任何捐款都欢迎!