Ajax Search Pro Documentation
Get Ajax Search Pro!Get SupportKnowledge BaseDevelopment
  • Ajax Search Pro Documentation
  • GDPR and Cookie policy
  • Video Guides
  • Plugin Updates
    • Automatic Updates
      • Activation on Development and Staging environments
      • Managing purchase codes
      • Purchase Code (license key)
    • Manual Updates
    • Safe Update Guide
    • Plugin update issues or errors
    • Disabling update check
  • Installation instructions
    • Uninstallation & Reset
  • Getting started
    • Importing from the Lite version
    • Editor Blocks
    • Search Shortcodes
    • Search Widget
    • Gutenberg and Other Page Editors
    • Replacing the default theme search bar
    • Placing the search shortcode in theme files
    • Search as menu item
    • Custom result box position
    • Custom filters box position
    • Shortcode generator
  • Search Sources
    • Search Engine
    • Post, Page, Product and other Post Type Search
    • Searching Titles, Content, Excerpt
    • Search in custom fields
      • Search By Product SKU
    • Search by categories, tags or other terms
    • Search in Attachments
      • Mime types table
    • Search in File contents (pdf, word, excel etc..)
    • Search in Users
      • User meta fields
    • Limits (number of results)
    • Categories and terms as results
    • Image options
    • Result ordering
    • Peepso Groups & Group activities search
    • Grouping title duplicates
  • Behavior
    • Return/Enter key and Magnifier icon click actions
    • Search logic (primary and secondary)
      • Exact Matches vs Fuzzy Matches
      • Search logics explained
    • Live search triggering events
    • Results page override
    • Results, Archive Page and Shop Live Search and Filter
  • Elementor Integration
    • Elementor Pro Posts Widget Live Filter
    • Elementor Loop Grid Integration
    • Elementor Pro Product Widget Live Filter
    • Custom results page with Elementor Pro
    • Elementor custom search page archive override and live filter
  • Other Integration
    • Jet Engine Listing Grid Integration
  • Multisite Settings
  • Frontend Search Settings & Search Filters
    • Settings layout, position and visibility
    • Generic Selectors
    • Content Type filters
    • Date filters
    • Category and Taxponomy term filters
    • Post type Filters
    • Custom field filters - selectors
    • Search button
    • Reset button
  • Layout Settings
    • Result Layout Types
    • Results information box
    • Results position & snap
    • Content, author, date and description in results
    • More results loader and infinite scroll feature
    • Results behavior
    • Results text keyword highlighter
    • Compact search box layout
    • Auto Populate - Automatic search results on initial page load
  • Autocomplete and Keyword suggestions
    • Autocomplete
    • Results and Keyword suggestions
    • "Try these" - suggested phrases
  • Theme Options - Visual changes to the search bar
    • Theme chooser
    • Preview
    • Search box and input field layout
    • Settings and Magnifier icon
    • Settings dropdown
    • Typography
  • Index Table
    • Generating the index table
    • Enabling index table engine
    • File Content Search Addon
    • Index table FAQ
    • Synonyms
  • Relevance Options
  • Advanced Options and Uses
    • Using the Results shortcode as a custom results page
    • Shortcodes in results content
    • HTML tags in results
    • Primary and Secondary title and description fields
    • Advanced title and Content fields
      • User Search - Advanced Title and Content fields
    • Excluding & Including results
      • Exclude by category or terms
      • Exclude or Include by authors (users)
      • Exclude or Include by date
      • Exclude by Item or ID
      • Include by ID
      • Include by categories or terms (restrict to category)
      • Exclude or Include by custom field values
    • Grouping results
    • Keyword Exception & Exclusions
  • Result priority settings
    • Individual Priorities
    • Priorities by Rules (priority groups)
  • Performance Tuning
    • Fine tuning the search configuration
    • Cache
    • Visual performance
    • Ajax performance tracker
  • Compatibility Settings
    • Javascript Compatibility
  • Google Analytics Integration (GA4)
    • Tracking with Google Site Tag (gtag.js)
    • Tracking with Google Tag Manager
    • Site Search Tracking
  • Troubleshooting
    • Styling issues
    • The response data is missing from the ajax request error message
  • Translating components
    • Translating with WPML
    • Translating with Polylang
  • Pre-Purchase FAQ
  • Plugin API
    • Actions list and usage
    • Filters list and usage
    • asp_query_args filter
    • Theme functions
    • Front-end filters API
    • Javascript API
  • Other Useful Things
    • Additional search keywords for post types
    • Negative keywords
    • Meta box on post editor screen
Powered by GitBook
On this page
  • Prerequesites
  • Making a WordPress page first
  • Creating the search
  • Elementor Pro posts widget page
  • Live search Triggers
  1. Elementor Integration

Elementor Pro Posts Widget Live Filter

PreviousElementor IntegrationNextElementor Loop Grid Integration

Last updated 6 months ago

Prerequesites

Elementor Pro is required, as unfortunately the free version does not contain the Posts widget.

Making a WordPress page first

Under the Pages submenu, create a new page for this, which is going to be used as the host for the elementor widgets - and will act as the results page.

After creating the new page, open it with Elementor, and open your site admin panel on a new browser tab for convenience.

Theoretically any post type should work, but for the maximum compatibility, we recommend using pages for this

Creating the search

In this tutorial we are using the following configuration.

Elementor Pro posts widget page

Before starting a small text is needed - open up the search instance options, and click on the "Toggle Shortcodes for ..." text.

...then copy or take note of the "Elementor Posts Widget Live Filter" input text, we will need that in a moment..

Once the text is copied/noted, create or open an existing page within the Elementor page editor. We are using a two-column page layout. To the left column goes the posts widget, and to the right goes the search shortcode.

Look for "posts" within the widget finder, and drag the "Posts" widget to the desired position (to the left column in our case)

Make sure to use the Posts widget and not the Archive Posts - it does not work on single pages.

Open up the Posts Widget options, and navigate to the Advanced Options panel.

When done, look for the "shortcode" widget and drag it to position (to the right column in our case)

To the shortcode widget, enter the search shortcode, that you want to use. You can find the search shortcode under the "Ajax Search Pro" menu.

Copy and Paste the shortcode into the shortcode widget, hit "Apply" and save the page.

That's it! Open up the page, clear the cache, and the plugin should now actively filter the posts widget!

Live search Triggers

If the plugin shortcode is present on the same page as the widget, the alternative search triggers are automatically activated - these override some redirection/live search behaviours.

These override triggers can be configured on the same options panel, General Options -> Logic & Behavior

Please read each option hint for its exact purpose.

You can create a new search instance, but use an existing one, if you have one. No special configuraion is required - any search instance will work. If you are new to the plugin, please check the section first.

Getting Started
Elementor
Elementor Pro
Create a new page
Edit with elementor for the next step