Advanced Search

A modal window containing a search input with filtering options.

Dependencies

• Modal Window
• Search Input
• Radio Checkbox Buttons
• Circle Loader
• Autocomplete

How to

The Advanced Search component is a modal window containing a search box and filtering options. It's used in websites with content organized in many categories. It provides the users with a way to find things faster.

This component is based on the autocomplete plugin, therefore it inherits its options:

• create custom templates for each category of results
• show quick links
• result autocomplete

Results Structure #

Each category of results has the following HTML structure:

<li class="hide js-adv-search__category">
  <!-- custom content here (e.g., the label of your category) -->

  <ul class="js-adv-search__category-results">
    <li class="js-autocomplete__item is-hidden" data-autocomplete-template="category-1">
      <!-- result template here -->
    </li>
  </ul>
</li>

Make sure each category has a different data-autocomplete-template value (e.g., category-1, category-2).

More info on how to create a result template can be found on the autcomplete info page.

Search Results #

The advSearchResults function in the advanced-search.js file is used to retrieve the search results. Modify this function to populate the results list with your real content.

Categories

• Content and Layout > Filter
• Forms > Templates
• Overlays

Bug report & feedback

Component Github page ↗