3.2.0

Search Function - Highlights all matching rows

I was looking for a search function in the forum and found a couple starting points, but wanted something to highlight ALL rows found, not just one. What I came up with is an include file that I place below the AW grid whenever I need search functionality. As I sometimes struggle with the partial samples here, I thought I would include the whole thing. Maybe I can help someone as much as other posters have helped me. You will just need to change all occurences of "grid." to your grid name/id. (In my production version I use classes on the buttons for nicer formatting.)

<script language="JavaScript" type="text/JavaScript">
        function PerformSearch(clearSearch)
        {
            var rowsArray = [];        // array of row numbers where the text is found (AW is zero relative)
            var found_count = 0;     // the number rows found matching the search text
            //
            // passed vlaue of 'yes' means to clear the highlighted rows - do not perform a search, just clear
            // the text box and clear all highlighted rows.
            if (clearSearch == 'yes')
            {
                // clear any previous text from search box
                SearchBox.setControlText('');
                // set highlight to no rows 
                grid.setSelectionMode("multi-row"); 
                grid.setSelectedRows(rowsArray); 
                // set first row to current
                grid.setCurrentRow(0); 
                grid.setScrollTop(0); 
                //
                return false;
            }
            // search text orignal (used to display number of lines found)
            var searchTextOrig = SearchBox.getControlText(); 
            // upper case of search text (for caseless match) 
            var searchText = SearchBox.getControlText().toUpperCase(); 
            // 
            // if blank then exit 
            if(searchText == '') return false; 
            //
            // loop through all rows and all columns trying to match text (shifted tor upper for caseless match)
            // loop through rows
            for(var r=0;r<grid.getRowCount();r++) 
            { 
                // loop through columns
                for(var c=0;c<grid.getColumnCount();c++) 
                { 
                    var cellContent = grid.getCellText(c,r).toUpperCase(); 
                    var pos = cellContent.indexOf(searchText); 
                    // if text was found, set rowsArray to row nubmer (AW grid is zero relative) and then increment found_count
                    if(pos !=-1)  
                    { 
                        rowsArray[found_count] = r;
                        found_count++; 
                        // exit the loop.  Finding one occurrence on the line is enough.
                        break;
                    } 
                } 
            } 
            //
            // now check the results of the search
            if (found_count == 0)    // text was not found
            {
                // display message that text was not found (if clearSearch is not 'yes', which is our signal to clear the latest search)
                if (clearSearch != 'yes') 
                {
                    alert('"' + searchTextOrig + '" was not found.');
                }
                // set highlight to no rows (rowsArray is empty)
                grid.setSelectionMode("multi-row"); 
                grid.setSelectedRows(rowsArray); 
                // set first row to current
                grid.setCurrentRow(0); 
            }
            else    // text was found
            {
                // display message that the text was found
                var line_text = ' line'
                if (found_count != 1)
                {    
                    line_text = line_text + 's';
                }
                line_text = line_text + '.';
                
                alert('"' + searchTextOrig + '" was found on ' + found_count + line_text);
                // set highlight to all rows with the search text
                grid.setSelectionMode("multi-row"); 
                grid.setSelectedRows(rowsArray); 
                // set the current row to the first one found
                grid.setCurrentRow(rowsArray[0]); 
            }
        }

        var SearchBox = new AW.UI.Input;
        SearchBox.setStyle('width','200px');
        // the fOllOWing line puts an AW image in the text box 
        // SearchBox.setControlImage('search');
    </script>
    
    <table width="100%" border="0" cellpadding="2" cellspacing="0" style="table-layout: fixed">
        <tr>
            <td width="100%" class="TableData" align="left" valign="middle" bgcolor="#FFFFFF">
                Search for: <script>document.write(SearchBox);</script>
                &nbsp;&nbsp;
                <button title="Search the Results Data" onClick="javascript:PerformSearch('no');" id="go_button" name="go_button">
                    Go
                </button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button title="Clear highlighted rows" onClick="javascript:PerformSearch('yes');" id="clear_button" name="clear_button">
                    Clear
                </button>
            </td>
        </tr>
    </table>
Brian Crandall
June 10,

This topic is archived.

See also:


Back to support forum