Settings

Live Search

Disable or enable the Live Search feature. When enabled, results will be updated without reloading the page. When disabled the page will reload.

Update URL

Updates the URL in the address bar to reflect the current search & filter state.

Fully supports the browser history API, meaning you can press backwards and forwards in the browser to instantly load previous results fields state.

Show Loading Icon

Enabled the loading icon spinner when fetching new results. This settings enable the Loading Icon tab with more configuration options.

Fade Results

Fades the results out when fetching new results. Fades them back in when the results have been fetched.

Results Container

Note: this option may not be available. Some integration types handle this setting automatically for you.

A CSS selector to target the section on your site that that you want to be reloaded/updated when interacting with the search form – that contains your search results.

Choose a CSS selector that does not occur more than once on a page.

Examples could be:

• #main
• .search-results

Make sure that container chosen is wrapped around your search results (posts) and pagination.

Dynamic Sections

A CSS selector to target any other parts of the page to update.

For example, in addition to your results updating, you might also want to update the page title – then you would enter h1

Note: your CSS selector must target unique items on a page, if there are multiple instances of your selector on a page it will fail to update.

Scroll Window + Scroll To

One the results have updated you might want to scroll the window to particular section. Support options include:

• Top – scrolls the window all the way to the top of the page.
• Query – scrolls the window the results container, or the results list.
• Field – choose a connected field to scroll to.
• Custom – enter your own CSS selector to scroll to.

Pagination Type

Determines how your results will be paginated. Most queries use standard pagination but a load more pagination style is also available.

• Normal – using this setting assumes you will be using standard pagination, either numbers or prev/next links – this is the default option in WordPress and most plugins.
  • May reveal the setting Pagination Selector
• Load more – use this option if you’d like to use a Load More button instead, which will reveal more results each time its pressed.
  • May reveal the setting Posts Container
  • Make sure to add a Load More field underneath your results – you can do this by creating a Control field and setting the Control Type to Load More.

Pagination Selector

Note: this option may not be available. Some integration types handle this setting automatically for you.

Only available when using Normal Pagination type.

Enter a CSS selector to target your pagination links, so results are also updated via Live Search when using them. The selector should target the anchor tag specifically, i.e.:

.pagination a

.pagination a.nav-links

Posts Container

Note: this option may not be available. Some integration types handle this setting automatically for you.

Only available when using Load More Pagination type.

To use Load More funcitonality, it needs to know the exact container that contains only your individual posts / results, so that it may extract them and know where to place them.

Enter a CSS selector that container only your posts, where the direct child elements are the posts/results themselves.