Upgrading to Concierge auto-completion

This guide shows the steps required to upgrade a template for an existing search built prior to Funnelback v15.12 that uses auto-completion.

Prior to Funnelback 15.12, auto-completion was delivered using a jQuery UI based auto-completion library. A prototype Concierge implementation was also available via the Funnelback GitHub site

This guide focuses on upgrading the code within existing Funnelback Freemarker templates. When upgrading an existing search any search boxes that include auto-completion (for example within a global site search template) will also need to be upgraded in a similar manner, except configuration values and paths will need to be hardcoded in the template (e.g. you can’t use ${GlobalResourcesPrefix} inside your website template as this is only expanded by Freemarker, and the relative links will need to be replaced with absolute links to the Funnelback server).

Additional datasets and functionality can be configured after existing auto-completion is upgraded to use the Concierge widget.

Upgrading from the jQuery UI widget

1. Replace the existing auto-completion imports

jquery.funnelback-completion.js is no longer required for auto-completion and should be removed.

The jQuery UI and the jQuery templates widget were previously used only for the Funnelback auto-completion template and also should be removed unless other custom functionality relying on these widget has been added to the custom template.

Replace:

<script src="${GlobalResourcesPrefix}js/jquery/jquery-1.10.2.min.js"></script>
<script src="${GlobalResourcesPrefix}js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script src="${GlobalResourcesPrefix}thirdparty/bootstrap-3.0.0/js/bootstrap.min.js"></script>
<script src="${GlobalResourcesPrefix}js/jquery/jquery.tmpl.min.js"></script>
<script src="${GlobalResourcesPrefix}js/jquery.funnelback-completion.js"></script>

with:

<script src="${GlobalResourcesPrefix}js/jquery/jquery-1.10.2.min.js"></script>
<script src="${GlobalResourcesPrefix}thirdparty/bootstrap-3.0.0/js/bootstrap.min.js"></script>

<#-- Standard typeahead and handlebars libraries - required for auto-completion -->
<#if question.collection.configuration.value('auto-completion') == 'enabled'>
<script src="${GlobalResourcesPrefix}thirdparty/typeahead-0.11.1/typeahead.bundle.min.js"></script>
<script src="${GlobalResourcesPrefix}thirdparty/handlebars-4.7/handlebars.min.js"></script>
<script src="${GlobalResourcesPrefix}js/funnelback.autocompletion-2.6.0.js"></script>
</#if>

2. Add auto-completion styles

Add:

<#if question.collection.configuration.value('auto-completion') == 'enabled'>
<link rel="stylesheet" type="text/css" href="${GlobalResourcesPrefix}css/funnelback.autocompletion-2.6.0.css" />
</#if>

to the <head> section of the template.

The following example replaces the existing jQuery based auto-completion with Concierge providing an equivalent simple auto-completion.

Replace:

// Query completion setup.
jQuery("input.query").fbcompletion({
  'enabled'    : '<@s.cfg>auto-completion</@s.cfg>',
  'standardCompletionEnabled': <@s.cfg>auto-completion.standard.enabled</@s.cfg>,
  'collection' : '<@s.cfg>collection</@s.cfg>',
  'program'    : '<@s.cfg>auto-completion.program</@s.cfg>',
  'format'     : '<@s.cfg>auto-completion.format</@s.cfg>',
  'alpha'      : '<@s.cfg>auto-completion.alpha</@s.cfg>',
  'show'       : '<@s.cfg>auto-completion.show</@s.cfg>',
  'sort'       : '<@s.cfg>auto-completion.sort</@s.cfg>',
  'length'     : '<@s.cfg>auto-completion.length</@s.cfg>',
  'delay'      : '<@s.cfg>auto-completion.delay</@s.cfg>',
  'profile'    : '${question.profile}',
  'query'      : '${QueryString}',
  //Search based completion
  'searchBasedCompletionEnabled': <@s.cfg>auto-completion.search.enabled</@s.cfg>,
  'searchBasedCompletionProgram': '<@s.cfg>auto-completion.search.program</@s.cfg>',
});

with:

<#if question.collection.configuration.value('auto-completion') == 'enabled'>
// Auto completion setup
jQuery('input.query').autocompletion({
  datasets: {
    <#if question.collection.configuration.valueAsBoolean('auto-completion.standard.enabled')>
    organic: {
      collection: '${question.collection.id}',
      profile : '${question.profile}',
      program: '<@s.cfg>auto-completion.program</@s.cfg>',
      format: '<@s.cfg>auto-completion.format</@s.cfg>',
      alpha: '<@s.cfg>auto-completion.alpha</@s.cfg>',
      show: '<@s.cfg>auto-completion.show</@s.cfg>',
      sort: '<@s.cfg>auto-completion.sort</@s.cfg>',
      group: true
    },
    </#if>
    <#if question.collection.configuration.valueAsBoolean('auto-completion.search.enabled')>
    facets: {
      collection: '${question.collection.id}',
      itemLabel: function(suggestion) { return suggestion.query + ' in ' + suggestion.label; },
      profile : '${question.profile}',
      program: '<@s.cfg>auto-completion.search.program</@s.cfg>',
      queryKey: 'query',
      filter: $.autocompletion.processSetDataFacets,
      group: true,
      template: {
        suggestion: '<div>{{query}} in {{label}}</div>'
      }
    },
    </#if>
  },
  length: <@s.cfg>auto-completion.length</@s.cfg>
});
</#if>

Upgrading from the Concierge GitHub prototype

1. Replace the existing auto-completion imports

Replace:

<#-- Standard typeahead and handlebars libraries - required for auto-completion -->
<link rel="stylesheet" type="text/css" href="/s/resources/${question.collection.id}/${question.profile}/css/typeahead.css" />
<script type="text/javascript" src="/s/resources/${question.collection.id}/${question.profile}/js/typeahead.bundle.js"></script>
<script type="text/javascript" src="/s/resources/${question.collection.id}/${question.profile}/js/handlebars.js"></script>
<script type="text/javascript" src="/s/resources/${question.collection.id}/${question.profile}/js/typeahead.fb.js"></script>

with:

<#-- Standard typeahead and handlebars libraries - required for auto-completion -->
<#if question.collection.configuration.value('auto-completion') == 'enabled'>
<script src="${GlobalResourcesPrefix}thirdparty/typeahead-0.11.1/typeahead.bundle.min.js"></script>
<script src="${GlobalResourcesPrefix}thirdparty/handlebars-4.7/handlebars.min.js"></script>
<script src="${GlobalResourcesPrefix}js/funnelback.autocompletion-2.6.0.js"></script>
</#if>

2. Add auto-completion styles

Remove styles for auto-completion (usually defined as in-page styles).

Add:

<#if question.collection.configuration.value('auto-completion') == 'enabled'>
<link rel="stylesheet" type="text/css" href="${GlobalResourcesPrefix}css/funnelback.autocompletion-2.6.0.css" />
</#if>

to the <head> section of the template.

Most of the settings used for the current GitHub version of Concierge remain unchanged. However more significant changes may be required if you are migrating from an earlier version of the Concierge widget, however these should be limited to updating the JavaScript configuration block (similar to below).

Replace:

jQuery('#query').qc({
    datasets:{
        organic: {
            collection: '<@s.cfg>collection</@s.cfg>',
            profile : '<@s.cfg>auto-completion.profile</@s.cfg>',
            program: '<@s.cfg>auto-completion.program</@s.cfg>',
            alpha: '<@s.cfg>auto-completion.alpha</@s.cfg>',
            show: '<@s.cfg>auto-completion.show</@s.cfg>',
            sort: '<@s.cfg>auto-completion.sort</@s.cfg>',
            length: '<@s.cfg>auto-completion.length</@s.cfg>'
        }
    }
});

with:

<#if question.collection.configuration.value('auto-completion') == 'enabled'>
// Auto completion setup
jQuery('input.query').autocompletion({
  datasets: {
    <#if question.collection.configuration.valueAsBoolean('auto-completion.standard.enabled')>
    organic: {
      collection: '${question.collection.id}',
      profile : '${question.profile}',
      program: '<@s.cfg>auto-completion.program</@s.cfg>',
      format: '<@s.cfg>auto-completion.format</@s.cfg>',
      alpha: '<@s.cfg>auto-completion.alpha</@s.cfg>',
      show: '<@s.cfg>auto-completion.show</@s.cfg>',
      sort: '<@s.cfg>auto-completion.sort</@s.cfg>',
      group: true
    },
    </#if>
    <#if question.collection.configuration.valueAsBoolean('auto-completion.search.enabled')>
    facets: {
      collection: '${question.collection.id}',
      itemLabel: function(suggestion) { return suggestion.query + ' in ' + suggestion.label; },
      profile : '${question.profile}',
      program: '<@s.cfg>auto-completion.search.program</@s.cfg>',
      queryKey: 'query',
      filter: $.autocompletion.processSetDataFacets,
      group: true,
      template: {
        suggestion: '<div>{{query}} in {{label}}</div>'
      }
    },
    </#if>
  },
  length: <@s.cfg>auto-completion.length</@s.cfg>
});
</#if>

Help Center

Menu

Upgrading to Concierge auto-completion