Solved

Search:  display results & hide the rest

Posted on 2006-07-11
5
296 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

813 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

10 Experts available now in Live!

Get 1:1 Help Now