?
Solved

Search:  display results & hide the rest

Posted on 2006-07-11
5
Medium Priority
?
320 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

777 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