An Enhanced Local (not Web) Search Utility

[Acorn]

This is still in the cauldron of discovery.

BACKGROUND
Xara has not built-in Search Utility.
Yes - we have web solutions but what of local access to a Print document that is not "published" but is used in a Presentation or emailed?

APPROACH
I didn't just want to search for every single word but I wanted Keywords, Key Phrases and their definition or context across the entire document.

SOLUTION ADOPTED
I felt I could exploit the pop-up text capability

At its simplest, Search Terms are added through Web Animation > Mouse-over > Show pop-up text.
I decided that a Search Term must contain :: to be found.

PROOF OF CONCEPT
I used some CSS to establish if I could find text with Title content (pop-up text).

<style>
span[title*="::"] {
  text-decoration: underline;
  text-decoration-style:dotted;
  text-decoration-color: green;
  text-decoration-skip-ink: auto;
}
</style>

This locates any object with pop-up text containing :: and shows it with a dotted green underline.
[IE manages a solid underline so Preview is a tad disappointing]

The rest is code.

CONSTRUCTION
I added a Search page at the end of my document with a soft-grouped pair of shapes:

• Both hold all the required code so these are the transportable items - Copy & Pasted into your own Print Document, Presentation or Vertical Supersite [A Horizontal Supersite sort of works]
• A Page Transitions Supersite is probably ideal. [In other words, a Conventional Website will not work]
• I have added https://datatables.net (a jQuery plug-in) to make the Search Box remember its last search results and column position.
• The soft-grouped Placeholder Code (Head) has the set-up of the HTML Table and the green dotted underline.
• The Placeholder has HTML code (body) for the singular transparent box that has a Name 'search' and is:
  

  <script>var tableRows = "<table id='searchBox' style='pointer-events: auto;' class='display compact cell-border hover stripe'>";
  	tableRows += "<thead><tr><th>Term</th><th>Description</th><th>Anchor</th><th>Position</th></tr></thead>";
  var searchTerms = document.querySelectorAll('[title*="::"]');
  	for (var i = 0; i < searchTerms.length; ++i) {
  		if ( searchTerms[i].id == "" ) { searchTerms[i].id = searchTerms[i].title.substr(0,2) + i; };
  		tableRows += "<tr>"
  		tableRows += "<td><a href='#" + searchTerms[i].id + "'>" + searchTerms[i].textContent + "</a>" + "</td>"
  		tableRows += "<td>" + searchTerms[i].title + "</td>"
  		tableRows += "<td>" + searchTerms[i].id + "</td>"
  		tableRows += "<td>" + i + "</td>"
  		tableRows += "</tr>";
  	};
  	tableRows += "</table>";
  	
  	document.getElementById("search").innerHTML = tableRows;
  
  
  	$(document).ready(function() {
  		$('#searchBox').DataTable({
  	  "lengthMenu": [[ 10, 20 ], ["Enough", "More than Enough"]]
  	  , colReorder: true
  	  , stateSave: true
  		});
  	} );
      $('#search').css('pointer-events', 'auto');
  	$('#search a').attr('target', '_parent');
  	
  </script>

• The code adds the HTML rows to a table built up row by row from the Title contents of any object with a ::.

OPERATION
Add the Search Box to a bottom page.
Ensure you use :: in your pop-up text definition.
The rest is automatic.

DEMONSTRATOR
Please run and play with:
JS-Search Box.xar
I cribbed these pages form the PDF Help File for v17.0.
There are some issues with selecting some items, which is how Xara renders PDF into a Xara format.

WAY AHEAD
I invite suggestions for development.

I chose to omit images for the moment but it would be possible to add thumbnails into the table.
If so, I can visualise the approach to be used in a "native" Shopping Cart.

Acorn