# LyAutoComplete

**Repository Path**: xtqg/ly-auto-complete

## Basic Information

- **Project Name**: LyAutoComplete
- **Description**: 基于 antd 的 AutoComplete 组件封装，支持防抖查询，自定义列渲染等。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-16
- **Last Updated**: 2024-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LyAutoComplete

#### 介绍

基于 antd 的 AutoComplete 组件封装，支持防抖查询，自定义列渲染等。

#### 软件架构

使用 React 编写的基于 antd 的 AutoComplete 封装的组件

#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

#### LyAutoComplete

基于 antd 的 AutoComplete 组件封装，支持防抖查询，自定义列渲染等。

---

##### API

| 参数             | 说明                                                             | 类型     | 默认值    |
| ---------------- | ---------------------------------------------------------------- | -------- | --------- |
| options          | 展开的数据                                                       | Array    | []        |
| columns          | 定义展开的列字段，详细参考 columns API                           | Array    | -         |
| value            | 输入框的值                                                       | String   | undefined |
| valueKey         | 选择的展开数据的项的字段名                                       | String   | -         |
| placeholder      | 输入框提示                                                       | String   | -         |
| suffix           | 输入框后缀                                                       | String   | -         |
| onSuffixClick    | 输入框后缀点击事件                                               | Function | undefined |
| isDisabledSuffix | 是否禁用后缀按钮                                                 |          | false     |
| searchOptions    | 输入时异步调用该函数，用于防抖查询，参数 value 输入框的值        | Function | undefined |
| debounceTime     | 调用 searchOptions 的防抖时间 ms                                 | Number   | -         |
| onChange         | 值改变(搜索或者选择数据时)时的回调 参数 value 为 valueKey 字段值 | Function | undefined |
| isNotFocus       | 是否开启遮罩层，禁止输入                                         | Boolean  | false     |
| isNotFocusSuffix | 遮罩层后缀                                                       | Function | undefined |

---

##### columns API

| 参数      | 说明           | 类型                                    | 默认值 |
| --------- | -------------- | --------------------------------------- | ------ |
| title     | 列标题         | String                                  | -      |
| dataIndex | 列字段名       | String                                  | -      |
| key       | 列 key         | String                                  | -      |
| width     | 列宽度         | String                                  | -      |
| align     | 列对齐方式     | "left" \| "right" \| "center" \| string | -      |
| render    | 自定义渲染     | Function                                | -      |
| headAlign | 列标题对齐方式 | "left" \| "right" \| "center" \| string | -      |

---

##### 示例

```tsx
import { useEffect, useState } from "react";
import { LyAutoComplete } from "../index";

const staticOptions = [
  { id: "1", name: "张三", age: 18, gender: "男" },
  { id: "2", name: "李四", age: 19, gender: "女" },
  { id: "3", name: "王五", age: 20, gender: "男" },
  { id: "4", name: "赵六", age: 21, gender: "女" },
  { id: "5", name: "钱七", age: 22, gender: "男" },
];

const AutoComplete = () => {
  const [options, setOptions] = useState<any>([]);
  const [value, setValue] = useState("");
  useEffect(() => {
    setOptions(staticOptions);
  }, []);

  // 搜索数据
  const searchOptions = (value: string) => {
    const filterOptions = staticOptions.filter(
      (item) => item.name.indexOf(value) !== -1
    );
    setOptions(filterOptions);
  };

  const onChange = (value) => {
    setValue(value);
  };

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
      width: 100,
      align: "center",
      render: (text: string) => <div>{text}</div>,
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
      width: 100,
      align: "center",
      render: (text: string) => <div>{text}</div>,
    },
    {
      title: "性别",
      dataIndex: "gender",
      key: "gender",
      width: 100,
      align: "center",
      render: (text: string) => <div>{text}</div>,
    },
  ];

  return (
    <LyAutoComplete
      minWidth="150px"
      placeholder="请输入姓名"
      options={options}
      columns={columns}
      value={value} //输入框的值
      searchOptions={searchOptions} //搜索数据
      debounceTime={500} //防抖时间
      valueKey={"name"}
      onChange={onChange}
    />
  );
};

export default AutoComplete;
```

##### 效果

![image](./demo/img/demo.png)
防抖查询
![image](./demo/img/demo1.png)

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

#### 特技

1.  使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)