# Search

## Content

The [FlexGridSearch](/wijmo/api/classes/Wijmo_Grid_Search.Flexgridsearch.html) control provides a simple UI for performing full-text searches on FlexGrid controls.
It filters the data and highlights matches on the grid as you type.
The same FlexGrid control can be filtered by the [FlexGridSearch](/wijmo/api/classes/Wijmo_Grid_Search.Flexgridsearch.html) control and [FlexGridFilter](/wijmo/api/classes/Wijmo_Grid_Filter.Flexgridfilter.html) component at the same time.

| **Key Combination** | **Action** |
| --------------- | ------ |
| ESC | Clear search criteria. |
| Printable Characters | Search for items that contain the text typed. |

```javascript
import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridSearch } from '@mescius/wijmo.grid.search';

// create the grid
var theGrid = new FlexGrid('#theGrid', {
    itemsSource: getData()
});

// create the grid search box
new FlexGridSearch('#theSearch', {
    placeholder: 'FlexGridSearch',
    grid: theGrid
});
```

![image](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/image.4be2b8.png?width=800)

***

By default, we convert each row of data into a space-separated string for search matching, which in some cases (such as when the cell data itself contains spaces) may not yield the expected results. In such situations, you can enable `exactMatch` to perform precise matching for each cell.

```javascript
import { FlexGridSearch } from '@mescius/wijmo.grid.search';
new FlexGridSearch('#theSearch', {
    exactMatch: true // enable extra matching
});
```

***

The search is performed immediately after entering the search criteria by default. You can enable `isSubmitOnChange` to stop the immediate search, and press the Enter key to execute the search when you are ready to confirm the search content.

```javascript
import { FlexGridSearch } from '@mescius/wijmo.grid.search';
new FlexGridSearch('#theSearch', {
    isSubmitOnChange: true // stop the immediate search
});
```