Modify or transform an autocompletion variable in the template

Managed by | Updated .

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.

Was this artcle helpful?

Tags
Type: Keywords:
Features: Frontend > Templating Frontend > Auto-completion

Comments