Go to homepage

Projects /

Advanced Search

A modal window containing a search input with filtering options.

View Demo


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 -->

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.


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.