[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Search a Page for Content

Posted on 2012-08-31
6
Medium Priority
?
555 Views
Last Modified: 2012-09-18
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?
0
Comment
Question by:rgranlund
6 Comments
 
LVL 10

Expert Comment

by:Gregg
ID: 38355978
sounds complicated. This might get you started:
http://www.javascripter.net/faq/searchin.htm
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38357350
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
 
LVL 7

Author Comment

by:rgranlund
ID: 38357367
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 38357529
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 38357628
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
 
LVL 16

Accepted Solution

by:
hankknight earned 2000 total points
ID: 38358822
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses
Course of the Month20 days, 10 hours left to enroll

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question