:: Forum >> Version 2 >>

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
Thursday, June 10, 2010



This topic is archived.

Back to support forum

Forum search