A modal window containing a search input with filtering options.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
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) -->
<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 #
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.