Highlight for Query

A typical use case for /highlight-for-query method is the highlighting of documents listed in search results.

This highlighting method requires the following parameters:

  • uri - PDF document location. The value can be combined with other options on the server too.

  • query - Search string containing words, phrases, etc.

There is also a number of parameters that affect document delivery. Please see service API documentation for details.

Due to the eventual feature differences of search engine used to find the document, the highlighted PDF may actually mark more or less words than found by the search engine. (Internally, the highlighter uses Apache Solr search engine which has highly customizable text analysis and search options.)

The simplest way to integrate Highlighter would be using our jQuery plugin. The approach involves:

  1. Adding data attributes to the results page HTML, and...

  2. Including and initializing pdfHighlighter plugin.

Adding data attributes to page HTML

To a common ancestor element of document links, add data attributes for the query and, optionally, language:

...
<div id="results">
<ul data-query='rabbit' data-language="en">
<li><a href="url/to/result1.pdf">Document title</a></li>
<li><a href="url/to/result2.pdf">Document title</a></li>
...
</ul>
</div>
...

The query attribute may contain the complete search string including phrases (in quotes) and Boolean operators.

When rending the HTML page server side, make sure to HTML encode the query string. Otherwise, quotes from a phrase search could break your markup.

Initialize PDF Highlighter plugin

In the scripts section of your results page, include jQuery (if you don't use it already), the plugin script "jquery.pdf-highlighter.js", and initialize it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://demo.highlight4.me/js/jquery.pdf-highlighter.js"></script>
<script>
jQuery(document).ready(function() {
 
var hlConfig = {
highlighterUrl: "https://demo.highlight4.me", // update for self-hosted Highlighter
resolveDocumentBase: true
};
 
$('#results a[href*=".pdf"]').pdfHighlighter(hlConfig);
});
</script>

In the above example, using jQuery selector we attached highlighter to all PDF links below the results element.


comments powered by Disqus