In-Page Search

The In-Page Search component adds a search box to the page, with an optional alert. With a little HTML you can create a searchable page. This component was designed to search through large sections of text or data.

Demo

Search

Chemistry

Math

Plant Biology

Plant Research

Instructions for use

While editing a page:

1. Before adding this component to the page, enter the text content you wish to make searchable.
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 component from the list.
5. Enter the class of the HTML element you wish to search inside. This will most likely be a div, paragraph, table element or span.
6. Select whether or not you want the optional alert to display.
7. Click the "Save" button.
8. Click on the source code button, to the left of the snippet icon.
9. Add your class to the HTML element. Let's use a paragraph tag for example like in the demo above. ex. <p class="testFilter>Chemistry</p>
10. Save and Publish the page.