A-Z highlight function

[Steve100]

Hi
I want to use a A-Z list page with a search box and when the user types in a search term the words on the A-Z page become highlighted. Doe anyone know how I can using JavaScript to do this?

A similar feature is in customise this google hilite function so that it displays search results when a page is linked from google http://www.textism.com/tools/google_hilite/.

Does anyone know how to do this?

Thanks
Steve

[SpaceFrog]

I think you would have to work with regExp and do some replacements within the innerHTML some kind of replacing the matched word with the same word surrounded by

<div class="highlight">searched expresssion</div> 

with :

.highlight {color:white;
               background-color:Greenyellow;}

and do the reverse process after

[Steve100]

Hiya, any idea why this code won't do what I need with highlighting search terms?

<script language="javascript" type="text/javascript" >
 
   function textSearch() {   
       
	  var listItems = document.getElementsByTagName("li");	 
	   var inputText = document.getElementById("formSearchBox");
	     	
		 
     for (var i=0; i < listItems.length; i++) { 
			    			 
				 
            // if list item is equal to the search term
	 if (listItems[i].value == inputText.value) {				     
    	    // add a search class .hilite to the list item			 

                 listItems[i].setAttribute("class", "hilite");  
					 
					 
	  }
				
				
			  
      }
	      
   }
</script>

Thanks
Steve

[NikoB]

because listItems[i].value does not return the content of the li. this ONLY works for form fields.

try listItems[i].innerHTML or listItems[i].firstChild.nodeValue

[Steve100]

Great this function works well it highlights all the links that are typed in a search box.

What I need to do is break up the words within the links so I can highlight individual terms, any ideas?

I also need to ensure all entered text and link text is lower case.

<script language="javascript" type="text/javascript" >
 
   function textSearch() {      
	     var links = document.getElementsByTagName("a");	 
	     var inputText = document.getElementById("formSearchBox");
	     	
		 
		 for (var i=0; i < links.length; i++) { 		
				 
				 
				 // if list item is equal to the search term
				 if (links[i].firstChild.nodeValue == inputText.value) {				     
					 // add a search class .hilite to the list item					 
					 links[i].setAttribute("class", "hilite");  
					 
					 
				 }
				
				
			  
	     }
	      
   }
</script>

Thanks
Steve

[NikoB]

just use

<script language="javascript" type="text/javascript" >
 
   function textSearch() {      
	     var links = document.getElementsByTagName("a");	 
	     var inputText = document.getElementById("formSearchBox");
	     	
		 
		 for (var i=0; i < links.length; i++) { 		
				 
				 
				 // if list item is equal to the search term
				 if (links[i].firstChild.nodeValue.toLowerCase().indexOf(inputText.value.toLowerCase()) != -1) {				     
					 // add a search class .hilite to the list item					 
					 links[i].setAttribute("class", "hilite");  
				 }
				
				
			  
	     }
	      
   }
</script>

[Steve100]

Thanks but I can't this to work do I need something else?

I am using Firefox and the code to trigger this function is

form name="form-search" method="post" action="#">
<p>Type some keywords or a phrase to search this resource</p>
<p>
<input type="text" name="d" id="formSearchBox" onkeyup="textSearch();" />



</p>
</form>

[NikoB]

I almost though so
just change it to :

				 // if list item is equal to the search term
				 if (links[i].firstChild.nodeValue.toLowerCase().indexOf(inputText.value.toLowerCase()) != -1) {				     
					 // add a search class .hilite to the list item					 
					 links[i].setAttribute("class", "hilite");  
				 }
else
links[i].setAttribute("class", "");

[Steve100]

Sorry I still can't get this to work. It looks like good code though - I am not sure what the problem is.

Steven

[NikoB]

it would help if you describe what happens and the code you use right now...

[Steve100]

Hi here it is and nothing happens

<script language="javascript" type="text/javascript" >

function textSearch() {
var links = document.getElementsByTagName("a");
var inputText = document.getElementById("formSearchBox");


for (var i=0; i < links.length; i++) {


// if list item is equal to the search term
var linkText = links[i].firstChild.nodeValue.toLowerCase();

if (linkText.indexOf(inputText.value.toLowerCase()) != -1) {
// add a search class .hilite to the list item
links[i].setAttribute("class", "hilite");
} else

links[i].setAttribute("class", "");
}


}

}
</script>

Thanks
Steve

[Steve100]

If it helps this code works but doesn't highlight individual words - the user needs to type the entire phrase (your version is far better)

<script language="javascript" type="text/javascript" >

function textSearch() {
var links = document.getElementsByTagName("a");
var inputText = document.getElementById("formSearchBox");


for (var i=0; i < links.length; i++) {





// if list item is equal to the search term
if (links[i].firstChild.nodeValue == inputText.value) {
// add a search class .hilite to the list item
links[i].setAttribute("class", "hilite");


}



}

}
</script>

Steve

[Steve100]

Didn't make any difference - I am using Firefox anyway which should be CORE DOM compliant

[NikoB]

you getting any error message (oh and use the code tag for code...)

[Steve100]

No error message - can't understand it
Steve

[NikoB]

try

f (linkText.indexOf(inputText.value.toLowerCase()) != -1) {
// add a search class .hilite to the list item
links[i].class="hilite";
} else

links[i].class="";

oh and test with firefox... the javascript debugger is much better then ie

[Steve100]

I am almost there with the function now. I just need a way to only highlight text within links and ignore elements such as spans and images (using the nodeType function).

It didn't work can anyone suggest why?

Thanks
Steve

<script language="javascript" type="text/javascript">
function textSearch() {      
    var links = document.getElementsByTagName("a");    
    var inputText = document.getElementById("formSearchBox");

    for (var i=0; i < links.length; i++) {         
        // if list item is equal to the search term
        
		
		var linkText = links[i].firstChild.nodeValue.toLowerCase();
       
	    
              // only process text within links
              if (linkText.nodeType == 3) {
		
		if (linkText.indexOf(inputText.value.toLowerCase()) != -1) {                     
            // add a search class .hilite to the list item                    
            links[i].className='hilite';
        } else {
            links[i].className='';
        }
		
		} 
		
    }
}
</script>

[Steve100]

This code works fine - thanks for your help

Steven

<script language="javascript" type="text/javascript">
function textSearch() {
var links = document.getElementsByTagName("a");
var inputText = document.getElementById("formSearchBox");

for (var i=0; i < links.length; i++) {
// if list item is equal to the search term

if (links[i].firstChild.nodeType == 3) {
var linkText = links[i].firstChild.nodeValue.toLowerCase();

// only process text within links


if (linkText.indexOf(inputText.value.toLowerCase()) != -1) {
// add a search class .hilite to the list item
links[i].className='hilite';
} else {
links[i].className='';
}

}

}
}
</script>