Help Center

Menu

Modify or transform an autocompletion variable in the template

Background

This article describes how to modify or transform a variable that is being printed in the auto-completion template.

Before you start

Ensure that Funnelback has been configured and the collection has correctly working auto-completion.

Process

A Handlebars helper function must be registered to modify transform a variable that is included in an auto-completion template.

Multiple helper functions can be registered, and any variable modification or transformation is implemented (using standard JavaScript) within the function.

Example: Format the file size in kB

Funnelback returns the file size of a document in the data model in bytes in a variable called fileSize.

Normally it would be printed using a template block similar to:

template: {
    header: $('<h5>').text('Files').addClass('tt-category'),
    suggestion: '<div><{{label.title}} ({{label.metaData.author}}) [{{label.fileSize}}B]</div>',
    notFound: $('<div>').html('<em>No suggestions found</em>')
}

Note that {{label.fileSize}} will return the fileSize in Bytes (and the string returned by default has comma separators for the 1000s).

To transform this value to kB requires a Handlebars helper function.

  1. Add a helper function to a new <script> block before the <script> block used to configure the auto-completion.

    <script>
  /* Handlebars helper function to convert bytes to kilobytes */
  Handlebars.registerHelper('filesizeKB',function(bytes) {
    var kb = Math.round(parseInt(bytes.replace(/,/g, '')) / 1024);
    return kb;
  });
</script>
<script>
  jQuery(document).ready(function() {
    jQuery('input.query').autocompletion({
      program: '<@s.cfg>auto-completion.program</@s.cfg>',
      datasets: {
 ...
	template: {
    	header: $('<h5>').text('Files').addClass('tt-category'),
    	suggestion: '<div><{{label.title}} ({{label.metaData.author}}) [{{label.fileSize}}B]</div>',
    	notFound: $('<div>').html('<em>No suggestions found</em>')
    }
...

  2. Update the template block to call the helper function when printing the variable by updating the variable call from {{label.fileSize}} to {{filesizeKB label.fileSize}}:

    <script>
  /* Handlebars helper function to convert bytes to kilobytes */
  Handlebars.registerHelper('filesizeKB',function(bytes) {
    var kb = Math.round(parseInt(bytes.replace(/,/g, '')) / 1024);
    return kb;
  });
</script>
<script>
  jQuery(document).ready(function() {
    jQuery('input.query').autocompletion({
      program: '<@s.cfg>auto-completion.program</@s.cfg>',
      datasets: {
 ...
	template: {
    	header: $('<h5>').text('Files').addClass('tt-category'),
    	suggestion: '<div><{{label.title}} ({{label.metaData.author}}) [{{filesizeKB label.fileSize}}kB]</div>',
    	notFound: $('<div>').html('<em>No suggestions found</em>')
    }
...

  3. Save your template and observe that the filesize is now displayed in kB in the auto-completion.