Adding Search Ajax to Your Freedom Website

Dec 19, 2014 10:52 am

We now have a module layout to replace the default Search Input Interior layout with one that searches using Ajax. Below are the steps to add Search Ajax to your Freedom Websites.

NOTE: Before you begin, be sure that you have the jQuery Widget enabled and you are using either the option, "All Includes" or "jQuery Core + jQuery UI + Freedom Libraries"

First, go to Green > Ecosystem and sign into your Ecosystem Account.

Second, on the Modules tab after logging into your Ecosystem Account click on the "Replace" link next to the Search Module.

After clicking on the "Replace" link you will be taken to a page with a list of the Modules to replace. Click on "Add" next to the Ajax Search option. This has now added a new Module Layout under > Green > Layouts > Modules > Filter by Search > search_input_interior_ajax.

Next, go to your page layout you want to add the Search Input to. For example, your Home Page Layout (Green > Layouts > Pages).

In you page layout (or a module layout) you will want to add (or replace) the Search Ajax Layout Interior tag: [[layout.search_input_interior_ajax]].

Congrats! You have now added the Ajax Interior Search Input. Now, when you begin filling out the Search Input there will be a dropdown with the Search Results that will appear below the Search Input. This dropdown can be targeted and Styled using CSS.