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 an advanced search - with an entered a value - is hidden, you should display the search criteria and values.

### 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.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
+								---
 								Order: 6
-												change md file name

											
										
										
											2017-06-15 13:41:18 +08:00
+								Title: Advanced Search
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
+								---
 								With Advanced Search, users can narrow down the range of complex lists / tables.
 								---
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								## Conventions
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								### Interaction
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								<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">
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								Conventionally used with deep tables, suitable for search conditions as well as searching for a number of unknown values within a range.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								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.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
 								<br>
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								<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">
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								When an advanced search - with an entered a value - is hidden, you should display the search criteria and values.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								### Arrangement
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								<img class="preview-img" align="right" alt="Arrangement Example" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								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.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								### Specifications
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								<img class="preview-img" align="right" alt="Specification Example" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								- Landscape layout
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								Try not to place more than three columns of input boxes on one line. All Labels and input boxes should fall on the grid.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								- Vertical layout
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								Use `16px` for vertical margins.
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								## Field Type
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								### Interaction
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								<img class="preview-img" align="right" alt="Interactive Example" src = "https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">
-												testing translation

											
										
										
											2017-06-06 05:25:56 +08:00
-												adding advanced search

											
										
										
											2017-06-06 08:05:42 +08:00
+								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.