How to set up search for bootgrid

I am trying to set up search box for bootgrid control, like it is shown in the example page here. Page navigation invokes the ajax call and the server method processing the ajax call receives the searchPhrase, but typing into the search box does not invoke the server method. Both the documentation and various Q&A did not have guidance, this is the closest question but did not address my issue.

I am doing this in ASP.NET MVC website, here is the relevant code fragment.

            <div id="grid-command-buttons-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search form-group">
                        <div class="input-group">
                            <span class="icon fa input-group-addon fa-search"></span>
                            <input type="text" class="search-field form-control" placeholder="Search">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-condensed table-hover table-striped" id="redisKeyResults">
            <thead>
                <tr>
                    <th data-column-id="KeyName" data-formatter="link" data-type="string" data-order="desc" data-identifier="true">Key</th>
                    <th data-column-id="KeyName" data-formatter="commands">Flush</th>
                </tr>
            </thead>
        </table>

Javascript code to setup bootgrid is as below

$("#redisKeyResults").bootgrid({
    ajax: true,
    url: "RedisCacheKeyManagement/GetRedisKeyResultGrid",
    post: function() {
        return {
            id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
    },
    formatters: {
        "commands": function(column, row) {
            return "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-row-id=\"" +
                row.KeyName +
                "\">Flush</button>";
        },
        "link": function(column, row) {
            return "<a class=\"link-get\" data-row-id=\"" + row.KeyName + "\" href=\"" + row.link + "\">" + row.KeyName + "</a>";
        }
    }
})

The answer to setting up search is to enable header navigation on bootgrid. General settings can be set using API on the table tag and column settings on th tag.

Based on the documentation guidance, setting data-navigation attribute on the table tag with the value 2 or 3 shows the search box with all the functionality.

<table class="table table-condensed table-hover table-striped" id="redisKeyResults" data-navigation="3">

Hope this helps someone facing the same issue.