ant-design/docs/pattern/advanced-search.en-US.md

---
order: 6
title: Advanced Search
---

With Advanced Search, users can narrow down the range of complex lists / tables.

---

## Conventions

### Interaction

<img class="preview-img" align="right" alt="Interactive examples" description="While in a stowed state, a user clicks Advanced Search to expand search options; if the user has previously entered a query, it's a best practice to transfer the corresponding value to the input box." src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">

Conventionally used with deep tables, suitable for search conditions as well as searching for a number of unknown values ​​within a range.

Advanced search is generally used by intermediate / expert users, typically by clicking advanced search. If you are displaying complex data, you can expand advanced search by default.

<br>

<img class="preview-img" align="right" alt="Interactive examples" description="Place an Alert to show the value that has already been entered; the user can click "Clear" to empty all the input values. Click advanced search to expand Advanced Search again.' src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">

When advanced search is hidden, you should display the search criteria and values when a value is entered.

### Arrangement

<img class="preview-img" align="right" alt="Arrangement Example" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">

The order of the search criteria should be the same as the order of the titles in the table, and frequently used search conditions can be placed at the top.

### Specifications

<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">

<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">

- Landscape layout

Try not to place more than three columns of input boxes on one line. All Labels and input boxes should fall on the grid.

- Vertical layout

Use `16px` for vertical margins.


## Field Type

### Interaction

<img class="preview-img" align="right" alt="Interactive Example" src = "https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">

Field types usually appear at the bottom of the main search box. This is suitable when search conditions and values ​​are relatively small in the display.