Text Search HTML

sanders720 · Jan 4, 2005

I have an HTML document with a table. I would like to search the table for a keyword using wildcards, and have it either move to the next criteria in the table, or isolate the rows of the table based on the selection criteria.

Search

Gear – would find Gearboxes in the second row as the first item, and move to the word GEAR accordingly – with some kind of next function to pan through the document. The problem is, how would I always have my search string box on top?

OR – Isolate the rows that contain GEAR in column 1 or 2, thus temporarily hiding the rows that do not have this information.

Table:

Company Product Description

1234 Corp Air Cylinders, Proximity Switches and Accessories
5678 Corp Motors and Gearboxes
7890 Corp Conveyors and Belts

Any ideas would be greatly appreciated.

chessbot · Jan 12, 2005

What browser?

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)

sanders720 · Jan 12, 2005

Explorer 6.0, and I'm using Dreamweaver to create the page.

vbkris · Jan 13, 2005

o.k, here's some code tested in IE6 only:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>How To Use This Handbook</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
.hardcopy {color: #CC0000}
-->
</style>

<title>Searchable Table</title>

<script type="text/javascript">
<!--

function searchTable(txt)
{
  SearchFound=false;

  var re = new RegExp("("+txt+")","gi")
  var TheTbl= document.getElementById('tbl_to_search');
  TheTBody=TheTbl.childNodes[0]
  for(i=0;i<TheTBody.childNodes.length;i++)
  {
    TheTr=TheTBody.childNodes[i]
    for(j=0;j<TheTr.childNodes.length;j++)
    {
      TheTd=TheTr.childNodes[j]
      TheHtml=TheTd.innerHTML.replace(/<[^\s].*?>/gi,"")
      if(TheHtml.match(re))
      {
	 TheHtml=TheTd.innerHTML
	 TheHtml=TheHtml.replace(/\n/g,"")
	 TheHtml=TheHtml.replace(/\r/g,"")
 	 TheHtml=TheHtml.replace(/<font color='?red'? DONEBYSEARCH><b>([^<]+)<\/b><\/font>/gi,"$1")

	 TheHtml1=TheHtml.replace(re,"###$1###")

	 while(TheHtml1.match(/<[^>]*###([^#]+)###[^>]*>/))
  	 {
		 TheHtml1=TheHtml1.replace(/<([^#]*)###([^#]+)###([^>]*)>/g,"<$1$2$3>")
	 }

	 TheHtml1=TheHtml1.replace(/###([^#]+)###/g,"<font color='red' DONEBYSEARCH><b>$1</b></font>")
	 TheTd.innerHTML=TheHtml1
	 SearchFound=true;
      }
      else
      {
	 TheHtml=TheTd.innerHTML
	 TheHtml=TheHtml.replace(/\n/g,"")
	 TheHtml=TheHtml.replace(/\r/g,"")
 	 TheHtml=TheHtml.replace(/<font color='?red'? DONEBYSEARCH><b>([^<]+)<\/b><\/font>/gi,"$1")
	 TheTd.innerHTML=TheHtml
      }
    }
    
  }
  if(!SearchFound)
  {
    alert("No search results found.")
  }
}        
// -->
</script>

</head>

<body>
<p><strong>Vendor Hyperlinks</strong></p>
<p><strong></strong></p>
<p><strong>Scope: </strong></p>
<p>Metro Library Links. </p>
<p><strong>Purpose: </strong></p>
<p>To document which parts are purchased from which vendors, and reference their corresponding website address. </p>
<p><strong>Introduction: </strong></p>
<p>The Metro Library is basically a catalog of parts organized by manufacturer. These pages are an effort to reduce paperwork and keep information current. Items not available for internet access will be noted &quot;<span class="hardcopy">SEE HARDCOPY REFERENCE</span>.&quot; </p>
<p><strong>Description:</strong></p>

<form>
  <input type="text" name="srch" value="grip">
  <input type="button" value="Search!" onclick="searchTable(this.form.elements ['srch'].value);">
</form>
<br>
<table id="tab_to_search">
  <!-- ...... --->

<table width="1024" border="1" id="tbl_to_search">
  <tr>
    <th width="360" scope="col">Vendor Reference</th>
    <th width="646" scope="col">Product</th>
  </tr>
  <tr>
    <td><a href = "[URL unfurl="true"]http://www.agi-automation.com/"[/URL] class="MenuItem">AGI Automation Components </a></td>
    <td><a href = "[URL unfurl="true"]http://www.agi-automation.com/Pneumatic-grippers.htm"[/URL] class="MenuItem"> Grippers</a>, <a href = "[URL unfurl="true"]http://www.agi-automation.com/rotary-actuators.htm"[/URL] class="MenuItem">Rotary Actuators</a>, <a href = "[URL unfurl="true"]http://www.agi-automation.com/linear-actuator.htm"[/URL] class="MenuItem">Powered Slides</a>, <a href = "[URL unfurl="true"]http://www.agi-automation.com/miniature-linear-actuator.htm"[/URL] class="MenuItem">Mini Power Slides</a>, <a href = "[URL unfurl="true"]http://www.agi-automation.com/Linear-escapements.htm"[/URL] class="MenuItem">Feed Escapement</a>, <a href = "[URL unfurl="true"]http://www.agi-automation.com/EOAT-tool-changer.htm"[/URL] class="MenuItem">Hand Exchange</a> and <a href = "[URL unfurl="true"]http://www.agi-automation.com/eoat-load-limiter.htm"[/URL] class="MenuItem">Load Limiters</a>.</td>
  </tr>
  <tr>
    <td><a href = "[URL unfurl="true"]http://www.alcoa.com/gcfp/en/product.asp?cat_id=969&prod_id=1711"[/URL] class="MenuItem">ALCOA UltrAlloy 6020 </a></td>
    <td>Lead Free Aluminum Product.</td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Known is handfull, Unknown is worldfull

vbkris · Jan 13, 2005

Some Conditions:
1. this script will find all the values at once.
2. No use of wildcards.
3. There might be an easier way to do this

Known is handfull, Unknown is worldfull

sanders720 · Jan 13, 2005

Thanks for your reply, I'll play with it and learn from it.

Any other thoughts? Would there be a better way that will incorporate wild cards?

vbkris · Jan 13, 2005

let me try to play around with it....

Known is handfull, Unknown is worldfull

vbkris · Jan 13, 2005

hi,
did that work ok in your system???

Known is handfull, Unknown is worldfull

sanders720 · Jan 14, 2005

I won;t be ablt to get to it until Friday afternoon, but I'll let you know.

Thanks for your help!

sanders720 · Jan 17, 2005

Your code worked great! Any thoughts on wild carding for future reference, as actually, it's probably good enough the way it is. I wouldn't mind hiding the rows that have no red text, and having a button to redisplay if possible.

Thanks for the help - it was a great one.

vbkris · Jan 18, 2005

>>and having a button to redisplay if possible

i dont get you...

Known is handfull, Unknown is worldfull

sanders720 · Jan 18, 2005

The selection criteria would hide rows, and a secondary button would show all rows again.

BTW: The Current Script locks up when search is selected without any criteria entered. Can it be set up not to do this?

Otherwise, the code is excellent, and I really appreciate your contribution - as I am more of an Access VB person and not yet into JavaScript!

vbkris · Jan 20, 2005

Add this to the start of the function....

function searchTable(txt)
{
if (txt=="")
{
return false
}
SearchFound=false;

Known is handfull, Unknown is worldfull

sanders720 · Jan 20, 2005

Thanks again for the help. Works fine!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Text Search HTML

sanders720

Programmer

chessbot

Programmer

sanders720

Programmer

vbkris

Programmer

vbkris

Programmer

sanders720

Programmer

vbkris

Programmer

vbkris

Programmer

sanders720

Programmer

sanders720

Programmer

vbkris

Programmer

sanders720

Programmer

vbkris

Programmer

sanders720

Programmer

Similar threads

Part and Inventory Search

Sponsor