Solved

Search:  display results & hide the rest

Posted on 2006-07-11
5
290 Views
Last Modified: 2011-10-03
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>
0
Comment
Question by:omanca
  • 3
  • 2
5 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17080107

<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>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17080108
PS: You cannot wrap a table or a form in a header tag
0
 
LVL 2

Author Comment

by:omanca
ID: 17080137
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
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 17080414
Change this
tb.rows[i].style.visibility=(tb.rows[i].cells[1].innerHTML.toLowerCase().indexOf(str) ==-1)?'hidden':'visible'
to
tb.rows[i].style.display=(tb.rows[i].cells[1].innerHTML.toLowerCase().indexOf(str) ==-1)?'none':'block'

however it looks messy in Firefox for some reason

What do you mean by "but this is ncessary for it to be a successful peace of software"
since when is invalid html necessary???

If you want to hide stuff, wrap it in DIVS rather than Hs
0
 
LVL 2

Author Comment

by:omanca
ID: 17087878
Brilliant
Many many thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now