### 3.1. 组件搭配使用

#### 3.1.1. 使用说明

（1）为方便用户理解，需要在搜索框内提示具体可检索的数据类型，尽量避免出现“请在此搜索”、“请输入你要搜索的内容”等过于空泛的提示

![基础搜索框-1](https://tdesign.gtimg.com/site/design/images/基础搜索框-1.jpg)

（2）搜索的内容需要进行即时的反馈，以引导或告知用户搜索的内容

![使用场景2-1](https://tdesign.gtimg.com/site/design/images/使用场景2-1.jpg)

#### 3.1.2. 组件的状态

搜索框状态可分为：默认态、可清空态、批量内容展示态

默认态：

![基础搜索框-2](https://tdesign.gtimg.com/site/design/images/基础搜索框-2.jpg)

批量搜索展开态：

![批量搜索框-输入中](https://tdesign.gtimg.com/site/design/images/批量搜索框-输入中-1850477.jpg)

![批量搜索框-输入后-1](https://tdesign.gtimg.com/site/design/images/批量搜索框-输入后-1.jpg)

#### 3.1.3. 交互逻辑

（1）基础搜索框

默认状态

![基础搜索框-正常](https://tdesign.gtimg.com/site/design/images/基础搜索框-正常-1850501.jpg)

输入中：回车或点击下拉内容可触发搜索，输入内容后出现清空按钮

![基础搜索框-输入中](https://tdesign.gtimg.com/site/design/images/基础搜索框-输入中-1850507.jpg)

输入完成（不带清空按钮）

![基础搜索框-输入后](https://tdesign.gtimg.com/site/design/images/基础搜索框-输入后-1850514.jpg)

（2）批量搜索框

默认状态

![基础搜索框-3](https://tdesign.gtimg.com/site/design/images/基础搜索框-3.jpg)

输入中：可选择联想内容，选后可继续输入进行搜索

![使用场景2-2](https://tdesign.gtimg.com/site/design/images/使用场景2-2.jpg)

输入完成

![批量搜索框-输入后-2](https://tdesign.gtimg.com/site/design/images/批量搜索框-输入后-2.jpg)
