⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳

Projects

Progress value is 30%

Advanced Search

A modal window containing a search input with filtering options.

View Demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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.

Project duplicated

Project created

Globals imported

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