Free Webflow Functions

img

Chrome Extension

img
Back

On Page Search

Dynamic Webflow On Page Search with the best collection

Cloneable

Documentation

Documentation

Step 1

Copy the on page search <script> and paste into the <before closing body> of your page

                                <script src="https://flowgiri.com/js-library/on-page-search.min.js"></script>

Step 2

1. Assign the targeted items container name as the value of the attribute flowgiri-on-page-search-field to the search input.

Name:

flowgiri-on-page-search-field

Value:

"[search-items-container-name]"

2. Take a div block and add flowgiri-search-items-container attribute and give a unique name as a value. this container div will contain each of the search items.

Name:

flowgiri-search-items-container

Value:

"[search-items-container-name]"

Take idea from an example. 

  <input type="text" flowgiri-on-page-search-field ="search" />
    <div flowgiri-search-items-container="search" >
     <div> your content </div>
     <div> your content </div>
     <div> your content </div>
  </div>

Get the latest updates to your inbox.