Basic Concepts
What is FBAC?
FBAC is an acronym for Funnelback Autocomplete/Concierge
.
FBAC is a standalone, vanilla JS library for Funnelback's autocomplete and concierge, making it a competition for Funnelback Auto-completion
and Typeahead/ Bloodhound
.
FBAC in numbers
Typeahead/ Bloodhound | Funnelback Auto-completion | Funnelback Autocomplete/Concierge | |
---|---|---|---|
Dependencies (other libraries) | jQuery, Typeahead, Bloodhound, (Handlebars) | jQuery, Funnelback Auto-completion, Typeahead Bloodhound, (Handlebars) | None |
Support | IE11+ (or earlier) | IE11+ (or earlier) | IE11+ (or earlier) |
Documentation | Good | Poor | Good |
What is the size of the bundle? | 41KB (T&B) + 249KB (jQuery) | 41KB (T&B) + 249KB (jQuery) + ~50KB (FA) | 79KB |
Easy in use | Yes | Yes | Yes |
Can use different endpoints? | Yes | Yes | Yes |
Can use the same endpoint many times? | Yes, but is fetched many times | Yes, but is fetched many times | Yes, and is fetched once |
Can display one global header? | No | No | Yes |
Can display one header per endpoint? | Yes | Yes | Yes |
Can display one global footer? | No | No | Yes |
Can display footer on each endpoint? | Yes | Yes | Yes |
Can wrap results in another template? | Yes, on the client HTML side | Yes, on the client HTML side | Yes |
Can display both autocomplete and concierge? | Yes | Yes | Yes |
Is for Funnelback only? | No | Yes (well, it’s in the name) | Yes (well, it’s in the name) |
Can set amount of signs to trigger autocomplete? | Yes | Yes | Yes |
Can set amount of results to render? | Yes | Yes | Yes |
Can set amount of results to fetch? | No, it fetches amount to render | No, it fetches amount to render | Yes |
Can define events, eg. afterFetch or beforeRender? | Yes | Yes | Yes |
How many events can you define? | 12 | 12 | 5 |
Can use events outside of the scope? | Yes | No | No |
Can manipulate fetched data before displaying? | No | Yes, in one place (callback dataset function) | Yes |
Can highlight data? | Yes, uses <strong> element with class | Yes, uses <strong> element with class | Yes, uses a template for highlighting |
How many fixed classNames does it have? | 9 | 9 | 6 |
Can I use loader? | Yes | Yes | Yes |
Can I set a threshold between fetching and typing? | No | Yes | Yes |
What is the behaviour for autocomplete result click? | Sends form with chosen query | Sends form with chosen query | Sends the form with chosen query OR fills the input with the chosen query |
What is the behaviour for autocomplete enter? | Sends form with chosen query | Sends form with chosen query | Sends the form with chosen query OR fills the input with the chosen query |
What is the behaviour for concierge result click? | Goes to a page | Goes to a page | Goes to a page |
What is the behaviour for concierge enter? | Goes to a page | Goes to a page | Goes to a page |
What is the tab behaviour? | Fills the input with the first suggestion | Fills the input with the first suggestion | Iterates through results (WCAG compatible) |
What is the behaviour of arrow-down? | Iterates through results | Iterates through results | Iterates through results (rows) |
What is the behaviour of side-arrows? | None | None | Iterates through results (columns) |
Can hide if no results are fetched? | Yes, via “ifology” in the template | Yes, via “ifology” in the template | Yes, via one variable |
Can hide global header and footer on no results? | No | No | Yes, via one variable |
Can hide individual headers and footers on no results? | Yes, via “ifology” in the template | Yes, via “ifology” in the template | Yes, via one variable |
Can display hints in the input? | Yes | Yes | No |
Can destroy events and relations which were defined? | Yes | Yes | Yes |
Can add an URL parameter which has not been defined by creators? | No | Yes | Yes |
Can define default results to show when nothing is typed? | No | Yes | Yes, via “No results” template |
Can group items by some category? | Yes, via “ifology” in the template | Yes | Yes, via “ifology” in the template |
Can control data source which comes from Funnelback (JSON/JSONP)? | No | Yes | No |
Can transform data which comes from the endpoint? | No | Yes, via special template | Yes, via events |
Does it add functional accessibility attributes (eg. wai-aria attributes)? | No | No | Yes |
Positive | 19 | 22 | 🏆 36 |
Neutral | 10 | 11 | 🏆 4 |
Negative | 13 | 10 | 🏆 3 |
Basic concepts
There are two basic concepts related with FBAC that help you to create your own Funnelback autocomplete/concierge.
In order to make FBAC work you need to install FBAC, create HTML markup for an input bar and FBAC container, and create a configuration JavaScript with settings and templates.
Configuration
Configuration is an object that has properties with their default values in FBAC. You need to provide some of them as required fields - rest is filled automatically by the library.
Example of a simple FBAC configuration
The presented configuration has two different endpoints and three outputs. FBAC fetches the suggest.json only once per collection - in this case two times.
const concierge = new FBAC.default({
input: "#search",
inject: "#fbac",
highlight: true,
bindEvents: true,
events: {
beforeFetch(query) {
this.query = query.replace(/-/g, ' ');
}
},
scaffold(templates) {
return `
${templates.noResults}
${templates.header}
<div class="fbac__headers">
${templates.mercator_1.header}
${templates.mercator_2.header}
${templates.mercator_3.header}
</div>
<div class="fbac__all-results">
${templates.mercator_1.results}
<div class="fbac__concierge fbac__concierge--no-border">
${templates.mercator_2.results}
${templates.mercator_2.noResults}
</div>
<div class="fbac__divider"></div>
<div class="fbac__concierge">
${templates.mercator_3.results}
${templates.mercator_3.noResults}
</div>
</div>
<div class="fbac__footers">
${templates.mercator_1.footer}
${templates.mercator_2.footer}
${templates.mercator_3.footer}
</div>
${templates.footer}
`;
},
url: "https://mercator3-search01.squiz.co.uk/s/suggest.json",
urlParts: {
collection: "push-global-port-strategy"
},
fb: [
{
id: "mercator_1",
urlParts: {
collection: "push-meta-port-strategy"
},
display: {
headerOnNoResults: false,
footerOnNoResults: false
},
templates: {
results(iteratedResults, resultsClass) {
return `
<div class="fbac__autocomplete">
<div class="${resultsClass}">
${iteratedResults}
</div>
</div>
<div class="fbac__divider"></div>
`;
}
}
},
{
id: "mercator_2"
},
{
id: "mercator_3",
templates: {
result(data, eventClass) {
return `
<a href="${data.action}" class="fbac__result ${eventClass}" target="_blank">
${data.disp.name}
</a>
`;
}
}
}
]
});
concierge.init();
You will learn more about configuration in dedicated chapter.