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.