Filter from table head, within Region clears input

Question

Please help. I can't seem to figure out why the form element
clears when a filter is applied. It would be so easy if I could
apply the same region on both a <thead> tag for the sortable
column header, then skip the row with the text fields, and then
apply the same region to the <tbody> tag. But, one can't
apply a region to a THEAD or TBODY tag. Ugh! Is there a workaround
to this?? Here is my code for the table...
<div spry:region="pvSearchResults">
<table id="SPContentTbl">
<tr id="SPHeaderRow">
<th spry:sort="myID">ID</th>
<th spry:sort="myName">Name</th>
<th spry:sort="myRegion">Region</th>
</tr>
<tr id="SPHeaderRow">
<th> </th>
<th><input name="ffName" id="ffName"
onkeyup="StartFiltering(this.id,'myName');" /></th>
<th><input name="ffRegion" id="ffRegion"
onkeyup="StartFiltering(this.id,'myRegion');" /></th>
</tr>
<tr spry:repeat="pvSearchResults" spry:odd="roweven">
<td>{ID}</td>
<td>{Name}</td>
<td>{Region}</td>
</tr>
</table>
</div>
Of course, this would work, I think...
<div>
<table id="SPContentTbl">
<thead spry:region="pvSearchResults">
<tr id="SPHeaderRow">
<th spry:sort="myID">ID</th>
<th spry:sort="myName">Name</th>
<th spry:sort="myRegion">Region</th>
</tr>
</thead>
<tr id="SPHeaderRow">
<th> </th>
<th><input name="ffName" id="ffName"
onkeyup="StartFiltering(this.id,'myName');" /></th>
<th><input name="ffRegion" id="ffRegion"
onkeyup="StartFiltering(this.id,'myRegion');" /></th>
</tr>
<tbody spry:region="pvSearchResults">
<tr spry:repeat="pvSearchResults" spry:odd="roweven">
<td>{ID}</td>
<td>{Name}</td>
<td>{Region}</td>
</tr>
</tbody>
</table>
</div>
... but again, no regions on THEAD or TBODY tags. It does, in
fact, filter just fine, but only the first keystroke and then the
dataset reloads and clears the form element. I would love for the
text entered into the filter to persist so that a user could
continue to type and retype, etc.
Please help. Thank you in advance.

Answer 1

This solution is excellent!! The only outstanding issue is
that the input field loses focus and the user will have to reclick
in the form field. I tried to add the line,
document.getElementById(mf).focus();
to the funtion, where mf is the id of the form field, but it
did not work. Here is the full code, any suggestions?
function StartFiltering(mf,myRow){
var searchTxt = document.getElementById(mf).value;
if (!searchTxt){
dsSearchResults.filter(null);
return;
} else {
var regExpStr = searchTxt;
var regExp = new RegExp(regExpStr, "i");
var filterIt = function(ds, row, rowNumber){
var str = row[myRow];
if (str && str.search(regExp) != -1)
return row;
return null;
dsSearchResults.filter(filterIt);
var obsChange = new Object;
obsChange.onDataChanged = function(notifier, data){
document.getElementById(mf).value = searchTxt;
document.getElementById(mf).focus();
pvSearchResults.addObserver(obsChange);