Solved

Search:  display results & hide the rest

Posted on 2006-07-11
5
288 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
Comment Utility

<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
Comment Utility
PS: You cannot wrap a table or a form in a header tag
0
 
LVL 2

Author Comment

by:omanca
Comment Utility
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
Comment Utility
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
Comment Utility
Brilliant
Many many thanks
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

762 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

9 Experts available now in Live!

Get 1:1 Help Now