Jump to content

Show highlighted search keywords in search results?


MarcC
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :unsure: )

Link to comment
Share on other sites

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');});
  • Like 1
Link to comment
Share on other sites

  • 11 months later...

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 by OrganizedFellow
  • Like 3
Link to comment
Share on other sites

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>
 
  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...
  • 10 months later...

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.

Link to comment
Share on other sites

  • 4 years later...

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
	}

? 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...