antd模糊搜索框

浅浅的花香味﹌ 2022-11-15 11:23 230阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

antd的模糊搜索框该如何使用，这里通过一个列子说明一下：  
![在这里插入图片描述][20210331155323876.png]

HTML

<Item label="企业名称">
         { getFieldDecorator('enterpriseId', { 
           rules: [
             { 
               required: true,
               message: '请输入企业名称',
             },
           ],
           onChange:handleChangeCom,
           initialValue:enterId
         })(
           <Select
             showSearch
             allowClear
             placeholder="输入企业名称关键字"
             notFoundContent={ fetching ? <Spin size="small" /> : null}
             filterOption={ false}
             onSearch={ fetchUser}
             style={ {  width: '100%' }}
             labelInValue
           >
             { decorationEnterprisesData.map((d) => (
               <Option key={ d.enterpriseId} value={ d.enterpriseId}>{ d.nickName}</Option>
             ))}
           </Select>,
         )}
       </Item>

**参数说明：**

> `showSearch`： 使单选模式可搜索  
> `allowClear`： 支持清除  
> `notFoundContent`：当下拉列表为空时显示的内容  
> `onSearch`：文本框值变化时回调（就是输入关键字，从接口获取的数据）  
> `onChange`：选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数  
> `initialValue`: 设置初始值

数据设置：

const [fetching, setFetching] = useState(false);  // 是否获取数据状态
    const [decorationEnterprisesData, setDecorationEnterprisesData] = useState([]);  // 获取到的数据
    const [enterId,setenterId] = useState({    // 初始化搜索框的值
      label:"",
      key:""
    });
    
    //接口获取
    async function fetchUser(values) { 
      setFetching(true);
      const {  code, data } = await Http.getDecoration({   //调用接口获取数据，根据自己的接口来定义
        params: {  keyword: values },
      });
      if (code === 'SUCCESS') { 
        setFetching(true);
        setDecorationEnterprisesData(data);
      }
    }
    //输入框改变
    const handleChangeCom = (select) => { 
      setenterId(select);
      setDecorationEnterprisesData([]); //清空所有数据
      setFetching(false);
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221022/6edb2a56d8db4ce987e48f207e0b20ab.png
[20210331155323876.png]: /images/20221022/09c9c952eb1649aa8376349dd57d12bd.png