text search in only one column 1

[flashbbeb]

Hello,

I am creating a very basic glossary that has a text search function, and only want the search to apply to the words being defined (not the definitions).

Being a novice with JS, I did manage to find some code that would search the entire page (below). Whoever created it didn't credit themselves in the comments...

I am creating the glossary, so that it's a basic two column table, one for the word, one for the definition, a row for each word. Can anyone help me search just one column?

Thanks,
EB

// JavaScript Document
<script language="JavaScript">
<!--
var TRange=null

function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  // CODE FOR BROWSERS THAT SUPPORT window.find

  strFound=self.find(str);
  if (strFound && self.getSelection && !self.getSelection().anchorNode) {
   strFound=self.find(str)
  }
  if (!strFound) {
   strFound=self.find(str,0,1)
   while (self.find(str,0,1)) continue
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false)
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange()
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera browsers not supported, sorry...")
  return;
 }
 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}
//-->
</script>

 

[vicvirk]

if you have a regular 2-column table and your code is well-formed, you can use something like this which will search through the specified column in the specified table and highlight each row that contains the search string. Should get you started...

<script language="javascript">
function searchTable() {
	var strSearch = document.getElementById("tbxSearch").value;
	var tableCell;
	var ttlFound = 0;
	// get all the rows in the user table
	var userTable = document.getElementById("tblUsers").getElementsByTagName("tr");
	// for each row (skip the first one as it a header)
	for (var i = 1; i < userTable.length ; i++) {
		// get the 2nd cell (javascript is zero based, so the first cell is reference by a 0 then 1 ...etc)
		tableCell = userTable[i].getElementsByTagName("td")[1];
		cellContents = tableCell.innerHTML;
		if (cellContents.indexOf(strSearch,0) > -1) {
			tableCell.style.background = "#cccccc";
			ttlFound++;
		} else {
			tableCell.style.background = "#ffffff";
		}
	}
	if (ttlFound == 0) {
		alert("search string not found");
	}
}
</script>
<input type="text" id="tbxSearch" value="" /><br />
<input type="button" id="btnGo" value="Search" onclick = "searchTable();" />
<table id="tblUsers" border="1">
	<tr>
		<th>Field Name</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>user id</td>
		<td>unique identifier for a user</td>
	</tr>
	<tr>
		<td>user name</td>
		<td>The login name user logs into the system with</td>
	</tr>
	<tr>
		<td>user email</td>
		<td>The user's email address</td>
	</tr>
	<tr>
		<td>user city</td>
		<td>The city the user lives in</td>
	</tr>
	<tr>
		<td>user address</td>
		<td>The street address of the user</td>
	</tr>
</table>

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[flashbbeb]

Thanks, Vicvirk!

I like that it uses a style to highlight the cell with the text found. In your sample table, how would I have it search/highlight the "string found" cells in the Field Name column?

 

[flashbbeb]

I think I figured it out - just changed the [1] in the array to 0. Sweet.

Thanks again!

 

[flashbbeb]

One more question - the highlight is nice, but with a 1000+ word glossary, the user doesn't see what's highlighted unless they scroll down.

Is there any way that when the user clicks Search, each time it takes them to the next instance of the string found?

Thanks,
EB