AutoComplete组件封装

LyAutoComplete

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

组件地址

gitee.com/xtqg/ly-aut…

---

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	-

---

示例

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;

效果

防抖查询