Jump to content
MarcC

Show highlighted search keywords in search results?

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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.

Share this post


Link to post
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: )

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...