Go to rebrand

Search

Reusable search component based on Autocomplete component

How to use

Make sure to include the JS and the CSS into your page:

<script src="{{ static("js/ca_styleguide_search.js") }}"></script> <link rel="stylesheet" media="all" href="/static/css/ca_styleguide_forms_light.css" /> <link rel="stylesheet" media="all" href="/static/css/ca_styleguide_search.css" />

By default the search logic won't be initialized automatically. To do so, dispatch the com.consumeraffairs.styleguide.search.init event or instantiate the class passing the initOnDemand parameter as true. Example: new Search(element, window, true).

Markup

Include the ca-autocomplete js-search class and the attribute data-source with the endpoint used to find the search results.

<div class="ca-form"> <div class="ca-form__group" aria-autocomplete="list"> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--alt-color select-wrapper--shadowed"> <select class="ca-autocomplete js-search" data-source="https://www.consumeraffairs.com/api/site_search/?q="></select> <div class="ca-form__input-icon js-search-icon"> {% include 'frontend/icons/search.html' %} </div> </div> </div> </div>

Bigger variation

To make the input bigger as seen on the homepage hero header, you have to add the select-wrapper--xl class to the ca-form__input-icon-wrapper element.

<div class="ca-form"> <div class="ca-form__group" aria-autocomplete="list"> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--alt-color select-wrapper--shadowed select-wrapper--xl"> <select class="ca-autocomplete js-search" data-source="https://www.consumeraffairs.com/api/site_search/?q="></select> <div class="ca-form__input-icon js-search-icon"> {% include 'frontend/icons/search.html' %} </div> </div> </div> </div>

Public Method

The search instance is added to the js-search element:

var searchEl = document.querySelector('.js-search'); searchEl.search; // Search instance

Restarting the search

You can restart the search component (remove the entered input and the list of results) by calling the restart() public method.

var searchEl = document.querySelector('.js-search'); searchEl.search.restart();

Search Suggestions

This mecanism works based on window.search_suggestions prop, which means its only needed assign this prop with the following validated JSON:

window.search_suggestions = [ { 'name': 'Suggestion 1', 'pagetype': 'topic', 'url': 'http://coonsumeraffairs.com' }, { 'name': 'Suggestion 2', 'pagetype': 'topic', 'url': 'http://coonsumeraffairs.com' }, ]