Help Center

Menu

Add auto-completion to your search

Background

This article describes the steps required to add Funnelback auto-completion to a website search box.

Before you start

this article applies to Funnelback 15.10 and earlier. In Funnelback 15.12 auto-compeletion was upgraded to a typeahead based plugin. Search box setup is discussed in the auto-completion documentation._

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

The following resources are required by auto-completion and should be included within the page that contains the search box.

  • jQuery (v1.10.2)

  • jQuery UI (v1.10.3)

  • jquery.funnelback-completion.js - this should be obtained from your version of Funnelback and can be downloaded from your search results page by viewing the source code and finding the URL of the embedded JavaScript file within the page template.

Note: Funnelback auto-completion has only been tested with the quoted jQuery versions. Use of auto-completion with other versions of jQuery is not tested by Funnelback and should be used at your own risk.

Steps

Step 1. Add required JavaScript imports

Add these JavaScript libraries to your page. Note: ensure that the jQuery and jQuery UI libraries are only imported once within the web page.

<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.funnelback-completion.js"></script>

Step 2. Ensure the search box input element has a unique ID

Locate the search box HTML within the page and ensure that it has a unique ID applied to it.

e.g. An id of 'globalsearchbox' has been assigned to the text input field of the search box. This will be used to identify where to attach the auto-completions.

<form>
	<input type="hidden" name="collection" value="mycollection"/>
	<input type="text" name="query" id="globalsearchbox" />
	<input type="submit" />
</form>

Step 3. Add JavaScript to configure auto-completion

Add a JavaScript configuration block after the JavaScript imports. The code configures the auto-completion source and sets a number of display options for auto-completion.

At a minimum the following needs to be changed:

  • Ensure that the .fbcompletion() function is attached to the ID that was assigned above.

  • Ensure that correct values are set for the collection and program parameters. Collection should be set to the Funnelback collection ID, program should be set to the path to the Funnelback server’s auto-completion endpoint (suggest.json)

e.g. the example code below uses a collection value of 'mycollection' and program value that points to the auto-completion endpoint on the Funnelback server.

jQuery(function() {
    jQuery("#globalsearchbox").fbcompletion({
        'enabled' : 'enabled',
        'collection' : 'mycollection',
        'program' : 'search.mysite.com/search/s/suggest.json',
        'format' : 'extended',
        'source' : 'internal',
        'alpha' : '.5',
        'show' : '10',
        'sort' : '0',
        'length' : '2',
        'delay' : '50'
    });
})

The block of code above is generated by Funnelback when viewing a Funnelback search page - this can be cut and pasted into your template from the generated source code (note that the ID of the search box still must be set to the correct value).

Step 4. Add CSS to ensure that auto-completion is rendered correctly.

Add the following CSS directives to the stylesheet used by the website.

.ui-helper-hidden-accessible, .ui-help-hidden { display: none; }
.ui-menu { background-color: white; }
.ui-menu { width: 200px; border: solid 1px #e6e6e6; }
.ui-menu, .ui-menu li { list-style-type:none;margin:0;padding: 0; }
.ui-menu-item a, li.ui-autocomplete-category { display: block; padding: 2px; }
li.ui-autocomplete-category { background-color: #e6e6e6; font-weight: bold; }
ui-state-focus { background-color: #428bca;color: white; }