SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A-Z highlight function

    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

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    PHP Code:
    <div class="highlight">searched expresssion</div
    with :
    HTML Code:
    .highlight {color:white;
                   background-color:Greenyellow;}
    and do the reverse process after

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hiya, any idea why this code won't do what I need with highlighting search terms?


    Code:
    <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

  4. #4
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  5. #5
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I search words within links?

    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.
    Code:
    <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

  6. #6
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just use
    Code:
    <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>
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  7. #7
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I almost though so
    just change it to :
    Code:
    				 // 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", "");
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  9. #9
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I search words within links?

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

    Steven

  10. #10
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it would help if you describe what happens and the code you use right now...
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  11. #11
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't make any difference - I am using Firefox anyway which should be CORE DOM compliant

  14. #14
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you getting any error message (oh and use the code tag for code...)
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  15. #15
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No error message - can't understand it
    Steve

  16. #16
    SitePoint Addict NikoB's Avatar
    Join Date
    Nov 2005
    Location
    Austria
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try
    Code:
    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
    Corinis OpenSource Community & Content Management
    http://www.corinis.org

  17. #17
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <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>

  18. #18
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code works fine

    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •