In-Page Search and Filter

The In-Page Search and Filter component adds a filter dropdown and a search box to the page. With a little HTML you can create an area of content that is searchable and filterable. This component was designed to search through large sections of text. The filter option is a set of user-defined words. The search feature is dynamic, as you type the content will be narrowed down. Try searching 'Math' or 'Chemistry' in the Demo area, it will display more related content areas vs. filtering to only one or the other. This component was designed to create a dynamic user experience for finding relevant information.

Demo

Instructions for use

While editing a page:

1. Before adding this component to the page, enter and identify the text content you wish to make searchable and filterable.
2. Then move your cursor to the area of the page you wish to add the component.
3. Click the "Insert Component" button in the editor toolbar.
4. Select the In-Page Search and Filter component from the list.
5. Select the order in which the search and filter fields appear on the page.
6. Enter the class of the HTML element you wish to search inside. This will most likely be a div, paragraph, table element or span.
7. Select whether or not you want the optional alert to display.
8. Enter an optional wrapper class. ex:<div class="wrapperClass">
9. Enter a different class for the filter function.
10. Enter a label for the filter dropdown.
11. Enter a comma seperated list of the exact text you want to filter on.
12. Click the "Save" button.
13. Click on the source code button, to the left of the snippet icon.
14. Add your classes to the HTML elements. Let's use one of the degree program blocks as a template:

    
    <div class="degreeContainer">
      <!--Wrapper Class, in this case it's also the class that is being 
    searched-->
      <span>Bachelor of Science</span>
      <h2 class="degreeName">
        <!--Filter Class. This HTML element contains the exact text from 
        one item in the comma seperated list.-->
        <a href="#">Actuarial Science</a>
      </h2>
      <span>
        This major is an interdisciplinary program that provides 
        comprehensive training as a major or a specialization to highly 
        motivated students in the College of Natural Science. Finance, 
        economics, accounting, computer science, statistics and 
        probability all play a significant role in the education of 
        our next generations of actuaries.
      </span>
    </div>
    <!--Closing tag for the HTML Wrapper Class-->
     

15. Save and Publish the page.