
# Search

You can perform a row-level search on one or more fields.
The search option allows you to search by “partial word”, “case sensitive” criteria, etc.


```js
const fields = [
  { fieldName: 'Domestic/Import' },
  { fieldName: 'Country' },
  { fieldName: 'Brand Number' },
  { fieldName: 'Brand Name' },
  { fieldName: 'Model Number' },
  { fieldName: 'Model Name' },
  { fieldName: 'Color Number' },
  { fieldName: 'Color' },
  { fieldName: 'Sale Date', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd' },
  { fieldName: 'Sale Quantity', dataType: 'number' },
  { fieldName: 'Vehicle Price', dataType: 'number' },
  { fieldName: 'Vehicle Type' },
  { fieldName: 'Fuel' },
  { fieldName: 'Photo File Name' }
];

const columns = [
  { fieldName: 'Domestic/Import', name: 'Domestic/Import', width: 60 },
  { fieldName: 'Country', name: 'Country', width: 50 },
  { fieldName: 'Brand Number', name: 'Brand Number', header: 'Brand\nNumber', width: 50 },
  { fieldName: 'Brand Name', name: 'Brand Name', width: 80 },
  { fieldName: 'Model Number', name: 'Model Number', header: { text: 'Model\nNumber' }, width: 50 },
  { fieldName: 'Model Name', name: 'Model Name', width: 140 },
  { fieldName: 'Color Number', name: 'Color Number', header: { text: 'Color\nNumber' }, width: 50, editable: false },
  { fieldName: 'Color', name: 'Color', width: 100, editable: false },
  { fieldName: 'Sale Date', name: 'Sale Date', width: 90 },
  { fieldName: 'Sale Quantity', name: 'Sale Quantity', header: { text: 'Sale Quantity' }, width: 80, footer: { expression: 'sum', groupExpression: 'sum' } },
  { fieldName: 'Vehicle Price', name: 'Sale Price', header: { text: 'Sale Price', subtext: '(10K KRW)' }, width: 80, footer: { expression: 'sum', groupExpression: 'sum' } },
  { fieldName: 'Vehicle Type', name: 'Vehicle Type', width: 60 },
  { fieldName: 'Fuel', name: 'Fuel', width: 60 }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/searchDemoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function gridSearch() {
  const value = document.getElementById('txtSearch').value;
  const fields = dataProvider.getOrgFieldNames();
  const startIndex = gridView.getCurrent().itemIndex;
  const startFieldIndex = fields.indexOf(gridView.getCurrent().fieldName) + 1;
  const wrap = document.querySelector('input[name="wrap"]:checked').value;
  const caseSensitive = document.querySelector('input[name="case"]:checked').value;
  const partialMatch = document.querySelector('input[name="partial"]:checked').value;
  
  const options = {
    fields: fields,
    value: value,
    startIndex: startIndex,
    startFieldIndex: startFieldIndex,
    wrap: wrap,
    caseSensitive: caseSensitive,
    partialMatch: partialMatch
  };

  const index = gridView.searchCell(options);
  gridView.setCurrent(index);
}
```

#### Setting search conditions

[SearchOptions](/refs/Interface/SearchOptions#search) specifies conditions for finding a specific row among the rows currently displayed in the grid.

```js
var value = document.getElementById('txtSearch').value;
var fields = dataProvider.getOrgFieldNames();
var startIndex = gridView.getCurrent().itemIndex;
var startFieldIndex = fields.indexOf(gridView.getCurrent().fieldName) + 1;
var wrap = document.querySelector('input[name="wrap"]:checked').value;
var caseSensitive = document.querySelector('input[name="case"]:checked').value;
var partialMatch = document.querySelector('input[name="partial"]:checked').value

var options = {
   fields : fields,
   value : value,
   startIndex : startIndex,
   startFieldIndex : startFieldIndex,
   wrap : wrap,
   caseSensitive : caseSensitive,
   partialMatch : partialMatch
};

var index = gridView.searchCell(options);
gridView.setCurrent(index);
```

#### Search

Use the searchCell function to find the first row corresponding to the values of the specified fields and return the row number.

```js
var index = gridView.searchCell(options);
```

#### Move focus

Moves focus to the first row returned.

```js
var index = gridView.searchCell(options);
gridView.setCurrent(index);

gridView.setFocus();
```