asked on

Search: display results & hide the rest

Hello,

I've used this code for other purposes and it works just fine.

I need a modificcation on this code so it does the following:

1. when text is searched and found, the program should hide all the rows that do not contain that word
example:
when searching for the word: "computer"
I should get only: a. computer science & b. computer engineering

2. (optional) Let search be done in the second column (major) only instead of the whole table.

<html>
<head>
<style type="text/css">
h3.one
{
visibility:visible
}
h5.two
{
visibility:visible
}
</style>

<script language="Javascript">

var IE4 = (document.all);

var win = top
var n = 0;

function search(str)
{
var txt, i, found;

if( str == "" )
return false;

if (IE4)
{
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++)
{
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

if (found)
{
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}

else
{
if (n > 0)
{
n = 0;
alert(str + " File exists.");

}
else
alert(str + " was not found on this page.");
}
}
}

</script>
</head>
<body>

<h3 class="one">
<form name="myForm">
<input type="text" name="query">
<input type="button" value="search" onclick="search(this.form.query.value);">
</form>
</h3>

<h5 class="two">
<table border size=1>
<tr>      <td>univ.</td>      <td>major</td>            <td>%</td>      <td>ann. cost</td></tr>
<tr>      <td>UCLA</td>      <td>computer science</td>      <td>70</td>      <td>1000</td></tr>
<tr>      <td>OSU</td>      <td>civil engineering</td>      <td>60</td>      <td>2000</td></tr>
<tr>      <td>FAU</td>      <td>computer engineering</td>      <td>75</td>      <td>3000</td></tr>
<tr>      <td>FAU</td>      <td>IT</td>        <td>75</td>      <td>3000</td></tr>
<tr>      <td>FAU</td>      <td>IS</td>        <td>75</td>      <td>3000</td></tr>

</table>
</h5>

</body>
</html>

Michel Plungjan

<html>
<head>
<style type="text/css">
h3.one
{
visibility:visible
}
h5.two
{
visibility:visible
}
</style>

<script language="Javascript">
function showRes(str) {
var tb = document.getElementById('t1')
str = str.toLowerCase();
for (i=0;i<tb.rows.length; i++) {
if (tb.rows[i].cells[1].className=='searchable') {
tb.rows[i].style.visibility=(tb.rows[i].cells[1].innerHTML.toLowerCase().indexOf(str) ==-1)?'hidden':'visible'
}
}
}
</script>
</head>
<body>

<form name="myForm">
<input type="text" name="query" onKeyUp="showRes(this.value)">
</form>

<table border size=1 id="t1">
<tr> <td>univ.</td> <td >major</td> <td>%</td> <td>ann. cost</td></tr>
<tr> <td>UCLA</td> <td class="searchable">computer science</td> <td>70</td> <td>1000</td></tr>
<tr> <td>OSU</td> <td class="searchable">civil engineering</td> <td>60</td> <td>2000</td></tr>
<tr> <td>FAU</td> <td class="searchable">computer engineering</td> <td>75</td> <td>3000</td></tr>
<tr> <td>FAU</td> <td class="searchable">IT</td> <td>75</td> <td>3000</td></tr>
<tr> <td>FAU</td> <td class="searchable">IS</td> <td>75</td> <td>3000</td></tr>

</table>

</body>
</html>

Michel Plungjan

PS: You cannot wrap a table or a form in a header tag

omanca

ASKER

Thanks for this quick answer mplungjan,

but the table I'll by doing is much bigger than the one I put in this example, and it wouldn't really look good.

I saw your other comment about not being able to wrap the table, but this is ncessary for it to be a successful peace of software

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

omanca

ASKER

Brilliant
Many many thanks

Search: display results &amp; hide the rest

Search: display results & hide the rest