# Full Text Search

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content

Searching a grid with huge data source can be a tedious task even in a grid that supports column filtering and sorting. To make this task easier, FlexGrid supports searching the entire data source connected to the grid through full-text search. To support full-text search in FlexGrid, you need to use the **FlexGridSearch** control which is represented by the [FlexGridSearch](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridSearch.html) class. This control appears similar to a search box that allows users to quickly search the items displayed in a FlexGrid.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridsearch.gif)

The following example shows the use of FlexGridSearch control to search the items in FlexGrid. The example uses **Sale.cs** model added in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart). The grid updates dynamically as you enter text and highlights any full or partial matches according to the text you enter.
**Controller Code**

```csharp
public ActionResult Index(FormCollection data)
{
        return View(Sale.GetData(200));
}
```

**View Code**

```razor
@model IEnumerable<Sale>
<p id="theSearch"></p>
@(Html.C1().FlexGrid<Sale>()
        .AutoGenerateColumns(false)
        .Id("theFlexGrid")
        .CssClass("grid")
        .Height(500)
        .ScrollIntoView(10, 2)
        .IsReadOnly(true).AutoSizeMode(C1.Web.Mvc.Grid.AutoSizeMode.Both)
        .Bind(Model)
        .Columns(bl =>
        {
                bl.Add(cb => cb.Binding("ID"));
                bl.Add(cb => cb.Binding("Start"));
                bl.Add(cb => cb.Binding("End"));
                bl.Add(cb => cb.Binding("Country"));
                bl.Add(cb => cb.Binding("Product"));
                bl.Add(cb => cb.Binding("Color"));
                bl.Add(cb => cb.Binding("Amount").Format("c"));
                bl.Add(cb => cb.Binding("Amount2").Format("c"));
                bl.Add(cb => cb.Binding("Discount").Format("p0"));
                bl.Add(cb => cb.Binding("Active"));
        })
        .Filterable(f => f.DefaultFilterType(FilterType.Both))
)
@(Html.C1().FlexGridSearch("#theSearch")
          .Grid("theFlexGrid")
          .Placeholder("Enter search text here")
)
<p>The total item count is now <b><span id="searchCount"></span></b>.</p>
@section Scripts{
        <script>
                function saveValue(key, value) {
                        if (sessionStorage) {
                        sessionStorage.setItem(key, value);
                        } else {
                        $.cookies.set(key, value);
                        }
                }
                function getValue(key) {
                        if (sessionStorage) {
                        return sessionStorage.getItem(key);
                        } else {
                        return $.cookies.get(key);
                        }
                }
                function updateSearchCount(theGrid) {
                        let cnt = theGrid.collectionView.items.length;
                        document.getElementById('searchCount').textContent = cnt;
                }
                window.onbeforeunload = function () {
                        let theSearch = wijmo.Control.getControl("#theSearch");
                        saveValue("SearchValue", theSearch.text || "");
                }
                c1.documentReady(function () {
                        let theSearch = wijmo.Control.getControl("#theSearch");
                        theSearch.text = getValue("SearchValue") || "";
                        let theGrid = wijmo.Control.getControl("#theFlexGrid");
                        theGrid.collectionView.collectionChanged.addHandler(() => {
                                updateSearchCount(theGrid);
                        });
                });
        </script>
}
```

## Search Options

| Property | Type | Values | Description |
| -------- | ---- | ------ | ----------- |
| is-submit-on-change | Boolean | true / false | true: Search only triggers after pressing Enter.<br>false: Search updates as user types. |

## **Exact Match**

By default, FlexGrid converts each row into a space-separated string when performing search operations. As a result, searches may return unexpected matches when cell values contain spaces. To perform exact matching against individual cell values, set the `exactMatch` property to `true`.
This sample demonstrates how to enable `exactMatch`.

### Controller

```auto
public IActionResult Index()
{
    return View(Sale.GetData(15));
}
```

### View

```auto
@model IEnumerable<Sale>
<style type="text/css">
    .grid {
        height: 500px;
        border: 2px solid #e0e0e0;
        font-family: Cambria;
        font-weight: bold;
    }
</style>
<div>
<p id="theSearch"></p>
 </div>
@*Instantiate FlexGrid and set its properties*@
@(Html.C1().FlexGrid<Sale>()
           .Id("fgrid")
           .AutoGenerateColumns(false)
           .Width(700)
           .AllowAddNew(true)
           .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
           .CssClass("grid")
           .Bind(Model)
           //Binding columns data to FlexGrid
           .Columns(bl =>
           {
               bl.Add(cb => cb.Binding("ID"));
               bl.Add(cb => cb.Binding("Start"));
               bl.Add(cb => cb.Binding("Product"));
               bl.Add(cb => cb.Binding("Amount").Format("c"));
               bl.Add(cb => cb.Binding("Discount").Format("p0"));
               bl.Add(cb => cb.Binding("Active"));
           })
           .Filterable(f => f.DefaultFilterType(FilterType.Both))
           .AutoSearch(true)
           .CaseSensitiveSearch(true)
)
@(Html.C1().FlexGridSearch("#theSearch")
    .Grid("fgrid")
    .Placeholder("Enter text to search")
    .ExactMatch(true)
 )
```