Search a Page for Content

Is there a way to place a searchbox on my page, that when I type into it it will start to find matches?  Like the way if you use cntl+F in Firefox and you type a word in and it highlights on the page?
LVL 7
rgranlundAsked:
Who is Participating?
 
hankknightConnect With a Mentor Commented:
Here is a working example, based on a modified version of this jQuery plugin:
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $('.content').removeHighlight();
  $('.content').highlight($('.searchTerms').val(), false);

  $('.searchDo').click(function() {
   $('.content').removeHighlight();
   $('.content').highlight($('.searchTerms').val(), false);
  });
});

jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};
</script>
<style type="text/css">
.highlight {
background: yellow;
}
</style>
</head>
<body>

 <input type="text" class="searchTerms" value="great"/>
 <input type="button" class="searchDo" value="Click to Highlight Terms"/>

 <div class="content">
  <h1>Twelfth Night</h1>
  <p>Be not afraid of greatness: some are born great, some achieve greatness, and some have greatness thrust upon them.</p>
  <address>William Shakespeare</address>
  <h1>As You Like It</h1>
  <p>All the world's a stage, and all the men and women merely players: they have their exits and their entrances; and one man in his time plays many parts, his acts being seven ages.</p>
  <address>William Shakespeare</address>
 </div>
</body>
</html>

Open in new window

0
 
GreggCommented:
sounds complicated. This might get you started:
http://www.javascripter.net/faq/searchin.htm
0
 
Ray PaseurCommented:
Can you explain the need a little more?  For example, why wouldn't the client just use ctrl+F, since it is already built in?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
rgranlundAuthor Commented:
The client does not use FF.  Also they are very "UN-Technical" .  I want to as ease to the page that contains a bunch of information.
0
 
GwynforWebCommented:
I wrote this ages ago, it might work for you. Just cut and paste into the top of the page.

edit: (Just tested on IE and it works, did not on FF)

<script language="JavaScript"> 

//Script by GwynforWeb, enjoy and use freely.

// Set browser variables   
var IE4 = (document.all); 
var NS4 = (document.layers);

// Set browser window for searching
var win = window;     
var n   = 0; 

function FindString(str) 
{ 
 var PageText, Found, i; 

 if (str == "") 
   return false; 
   
 // Sniff for browser
 // Look for match starting at the current point winding around to first match

 if (NS4) 
 { 
   if (!win.find(str)) 
     while(win.find(str, false, true)) 
       n++; 
   else 
     n++; 

   // If not send message. 

   if (n == 0) 
     alert(" Not Found on Page."); 
 } 

 if (IE4) 
 { 
// Set search object to whole page 
   PageText = win.document.body.createTextRange(); 

// Search for nth match from top. 
   for (i = 0; i <= n && (Found = PageText.findText(str))  != false; i++) 
   { 
     PageText.moveEnd("textedit"); 
     PageText.moveStart("character", 1); 
   } 

   //  Scroll to and mark text if Found.
   if (Found) 
   { 
     PageText.moveStart("character", -1); 
     PageText.findText(str); 
     PageText.scrollIntoView();
     PageText.select();  
     n++; 
   } 

   // Else, goto top of the page and find first match. 

   else 
   { 
     if (n > 0) 
     { 
       n = 0; 
       FindString(str); 
     } 

   // Not Found then send message. 

     else 
       alert("Not Found on Page"); 
   } 
 } 

 return false; 
} 
</script> 

<input onchange="n = 0;" size="17" name="SearchString"></p>
<input type="submit"  value="Find on Page"> </p>

Open in new window

0
 
Ray PaseurCommented:
The client does not use FF.
Tested ctrl-F on FF, IE, and Chrome.  In all of those browsers it opened a "find" dialog box that not only worked, it featured autocomplete.  On Safari, it was apple-F.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.