[Plugin] Highlight search terms

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[sottwell]

I have a very crude implementation of highlighting search terms on the page.  It took a quick hack of the FlexSearchForm:

added the &searched='.$searchString.' to line 343

Code:

            $resultPageLinks .= '<a href="[~' . $modx->documentObject['id'] . '~]&searched='.$searchString.'&FSF_offset=' . $nrp . '&FSF_search=' . urlencode($searchString) . '">' . $resultPageLinkNumber . '</a>';

and again to line 361

Code:

        $SearchForm.='<a class="FSF_resultLink" href="[~'.$SearchFormsrc['id'].'~]&searched='.$searchString.'" title="' . $SearchFormsrc['pagetitle'] . '">' . $SearchFormsrc['pagetitle'] . "</a>".$newline;

and this plugin (tied to OnWebPagePrerender)

Code:

if(isset($_GET['searched'])) {

$searched = $_GET['searched'];
$content = $modx->documentOutput;

$new = str_replace($searched, '<span class="searchterm">'.$searched.'</span>', $content);

$modx->documentOutput = $new;
}

Style the .searchterm span in the CSS. 

As I said, it's very crude and only does one term and one color.  But it's a start!

[rthrash]

Susan, very super-cool! Seems like a candidate for a core distribution addition to me.

[sottwell]

Needs work, but I'm not familiar enough yet with exactly how the FlexSearchForm works to deal with more than one search term.  I need to drop in a few debugging echo statements and see what exactly it's doing.  Perhaps I can "explode" it and give each word a different color, sort of like Google does.  But for now, I thought it was a pretty good use of a plugin.

[sottwell]

Yeah, definitely need to be able to "explode" the string and deal with the individual words.  I hate the thought of parsing through the whole document for each word, but right now that's the only way I can think of to do it.  Change the class name to add the number for each word (found1, found2, etc) and still be able to style for it in the CSS.

[sottwell]

This does the trick!  Just put as many styles as you ever expect to have search words into the CSS file.

Code:

if(isset($_GET['searched'])) {

  $searched = $_GET['searched'];
  $content = $modx->documentOutput;

  $searchArray = explode(' ', $searched);
  $i = 0;
  foreach($searchArray as $term) {
    $i++;
    $content = str_replace($term, '<span class="searchterm'.$i.'">'.$term.'</span>', $content);
  }
  $modx->documentOutput = $content;
}

[rthrash]

what about just creating a few styles then having it alternate through them... maybe 4 or 5 by default.

Then, we could pass in an array of colors as a parameter:

Code:

&hlcolors=`#ff0, #f0f, #0ff, #ff5, #f5f, #5ff`

which would then alternated through for the words via a span stylng:

Code:

<span style="background-color:#ff0">first</span> blah blah blah <span style="background-color:#f0f">second</span> and so on...

It'd be kinda cool to keep it all in the snippet call it seems for some reason.

[sottwell]

And then, put a <div> with a message at the very top of the page, like Google's top frame...with a button to clear it that's just a "bare" link back to the same page only without the search string in the URL.  That would really be cool!

[rthrash]

Nice Susan.

Better than before (that is when your magic code appears on these here pages... lol)!

[sottwell]

Well, this has a serious problem.  No matter where in the parsed document the searchterm appears, the <span...etc gets put in...even if it's actually part of a URL or in the head!  Bad.  I shall have to think on this.  Even if I manage to just get the content for the document, it will stil have the problem of urls and image tags and such in the document content.  Hm.  I think it's actually going to take a very complex set of regular expressons to do this.

[sottwell]

Well.  Got that figured out.  It was rather frustrating, I spent hours combing Google and reading forum posts and trying various things...and it turns out that the PHP manual has an example of using eregi_replace to hightlight search terms.  Oh, well...I must say, I've learned a lot more about regular expressions.

So it basically works (I still need to filter out between A tags and Hx tags but that's really just to make it look prettier)

Code:

if(isset($_GET['searched'])) {

  $searched = $_GET['searched'];
  $output = $modx->documentOutput; // get the parsed document

  $body= explode("<body>", $output); // break out the head

  $searchArray = explode(' ', $searched); // break apart the search terms

  $i = 0; // for individual class names

  foreach($searchArray as $term) {
    $i++;
    $pattern = '(>[^<]*)('. quotemeta($term) .')';
    $replacement = '\\1<span class="searchterm'.$i.'">\\2</span>';
    $body[1] = eregi_replace($pattern, $replacement, $body[1]);
  }

  $output = implode("<body>", $body);

  $modx->documentOutput = $output;

}

[xwisdom]

Hi Susan,

Very cool additions indeed.

PS. Is it a plugin or a snippet?

[sottwell]

Plugin.  Hooked to the OnWebPagePrerender event.  Sorry, thought I said that in the first place!

[xwisdom]

Plugin.  Hooked to the OnWebPagePrerender event.  Sorry, thought I said that in the first place!

Cool. Didn't see the Plugin part only saw the the changes made to "FlexSearchForm"

[sottwell]

I do have a related question for you core gurus.  Is there a way to tie a plugin to a TV so that it will only run if the TV is present in the template? 

One thing, it would be nice to not have it run at all if you don't want it, so you just don't put the TV in the template if you don't want it.

The other thing, that would make it much easier to allow the user to modify the colors and styles used to mark the search term on a document-by-document basis.  For example, if I code it to have a search term with red text, and you have a template that makes all links red, it would be a Bad Thing.  On the other hand, leaving it not styled and the user has to style it in his CSS is a bit awkward.

[xwisdom]

Hi Susan,

It's not with 0.9.0 to bind a Plugin to a TV but you can create a plugin that will look inside the template/document for a special TV. If found it can be made to execute special code.