Solved

Search:  display results & hide the rest

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Non-Resizable Pharagraph 2 19
Provide the IDEA of External JS 1 42
Given a github repo find email address of all collaborators in that repo 1 36
Jquery 7 34
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

730 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