Show highlighted search keywords in search results?

[MarcC]

Is there a way to modify the default search.php to show keyword placement in result pages? For example, putting a span with class "highlight" around the relevant terms? I do this with other CMSes but am not sure where to start with the ProcessWire API. Thanks.

[diogo]

Maybe you can pass the query on the url via GET, or even parameters, and prepare the templates to do a str_replace on the fields.

[MarcC]

That makes sense. I was wondering if str_replace was the best way to do it. Thanks diogo.

[Soma]

If you use jquery theres some easy way and do it client side. If you add ?q=searchword to the search result links it's easy possible.

Some helpful links

To get a url parameter http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery

An lightweight plugin to highlight the word on page http://bartaz.github.com/sandbox.js/jquery.highlight.html

[MarcC]

Thanks, Soma. I didn't know that method existed, but it makes sense. I'm not sure if there is an advantage--which would you pick, and why?

[Soma]

I would pick js. Advantage would be that you can specify the context, to only highlight words in content for example, and you transfer the overhead to th client. Other than that it is personal preference. It would also be possible with a simple hook to page render and replace words in the output.

[DaveP]

The major advantage to the js approach is that you can easily provide an option to hide highlighting without a fresh page load. I often hate reading when search terms are highlighted with a yellow background and look for a way to turn it off. (This forum, for example )

[diogo]

Dave, here is a bookmarklet made especially for you

javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$('.searchlite').removeClass('searchlite');});

[DaveP]

Diogo, thank you very much indeed! It works perfectly.

And it prompted another Forum thread - http://processwire.c...arklets/!

[OrganizedFellow]

An lightweight plugin to highlight the word on page http://bartaz.github.com/sandbox.js/jquery.highlight.html

I stumbled upon this thread when I went looking EXACTLY for this, ha.

Using the above jQuery solution shared by Soma. I was able to get jQuery highlights on my client site search page. It was/is incredibly simple!

AND FOR ME to claim something is simple (I know no javascript) ... it's the simplest solution, believe me!

Save the jquery plugin to your 'js' folder and call it after your jQuery.js:

<script src="<?php echo $config->urls->templates; ?>js/jquery.highlight.js"></script>

Then stick this in the bottom of your search.php page:

<script>
	$("body").highlight("<?php echo $q; ?>");
	$(".highlight").css({ backgroundColor: "#FFFF88" });
</script>

The $q variable if what results from your input search box.

EDIT (sun.aug.10.2014): here is the latest jquery link

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Edited August 10, 2014 by OrganizedFellow

[ryan]

Just want to add that another benefit of taking the JS approach is that the pages could still be cached by PW's template cache or ProCache, etc. 

[digitex]

I've wanted to add this myself. While a big highlighted word may be distracting (right Dave?), finding the particular reference you searched for in a big page of text is equally frustrating and some form of delineation of the search term is helpful.

However, since the search results page only displays the title and summary, often the search term itself isn't present on the search results page and the highlight doesn't actually get a chance to work. It helps to be able to pass the value of $q onto the page the user clicks in the search results.

As Soma suggested, the easiest way that I found to do that (although there may be a better way) is to add:

foreach($matches as $m) {
            $out .= "<li><p><strong><a href='{$m->url}?q={$q}'>{$m->title}</a></strong><br>{$m->summary}</p></li>";
        }
 

Which then passes $q onto to the next page so it can be accessed by .highlight. Works for me. Simple and easy on my brain.

I should add you then need to add the following to the script at the bottom of the page:

<script>
    $("body").highlight("<?php $q = $input->get(q); echo $q; ?>");
    $(".highlight").css({ backgroundColor: "#FFFF88" });
</script>
 

[dragan]

Was looking for that feature as well, and found this thread. Works like a charm with purl.js + highlight.js!

[digitex]

I thought I'd report back here on a discovery. I was doing a routine search on a site that uses the highlighting method described here and on one page it wasn't working. I tracked it down to template caching.

For anyone looking to use this, something to be aware of.

[OrganizedFellow]

Hey folks.

I want to resurrect this old topic and share my latest finding ?

Source: https://www.jqueryscript.net/text/Fast-Word-Highlighting.html

file: _main.php
-------------------------
<style>
	.highlight {
		background-color: #FFFF88;
	}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<?php echo $config->urls->templates?>scripts/jquery.highlight.js"></script>
<script type="text/javascript">
	$('#content').highlight('<?php echo $q; ?>');
</script>

And optionally, I added this to 'search.php'

file: search.php
---------------------
	// did we find any matches?
	if($matches->count) {
		// yes we did
		$content = "<h2>Found $matches->count pages matching your query: $q</h2>";           // <<<<< ADD: $q
		// we'll use our renderNav function (in _func.php) to render the navigation
		$content .= renderNav($matches); 
	} else {
		// we didn't find any
		$content = "<h2>Sorry, no results were found for $q.</h2>";                         // <<<<< ADD: $q
	}

?