:: Forum >>

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