fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

February Updates
Currency Converter Cover
Layers Widget

Ajax Search

The Ajax Search Widget allows you to easily add a live search bar to any Elementor website. Customize the settings of the AJAX search widget to create the perfect layout and user experience for your website visitors. Its advanced post query options will give you full control to filter your posts exactly the way you want.

 

Let’s look at each of the options in the “Ajax Search Widget” below.

Install Ajax Search Widget for Elementor

This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Ajax Search”
  3. Hover over the widget in the search results and click install
  4. Add your “Ajax Search” widget to any Elementor Page

General Settings

1

Enable Connection to Ajax Post Filters

This will enable the widget to establish connection to Ajax Post Filter.

2

Search Button Open New Window

Clicking on search button will open a new window.

3

Search Result Open New Window

Clicking on any of the search results will open a new window.

4

Search Placeholder

Type text to display as search placeholder.

5

Show Search Button

Show/Hide the search button.

6

Search Button Text

Type text to display in the search button.

7

Search Button Icon

Choose an icon to display as search button.

8

Show Search Label

Show/Hide the search label.

9

Layout

Select the layout of ajax search widget.

  • Row
  • Row Reverse

Results Settings

1

Show Pagination

Show/Hide the pagination element.

2

Pagination Position

Set the positioning of pagination.

  • Before Results
  • After Results
3

Number of Items Per Page

Specify the number of items to show on a page.

4

Left Font Awesome

Paste unicode from font awesome website for left side.

5

Right Font Awesome

Paste unicode from font awesome website for right side.

6

Keys Control

Enable or disable keys control.

7

Number of Columns

Set the number of columns to display.

8

Items Gap

Set the gap between items.

9

No Result Text

Type text to display when no result found.

Testing and Tools

1

Show List Debug

Debug list in editor, so you can style it.

2

Show Loader Debug

Show/hide the loader debug option.

Posts Query Setting

Select the exact posts you want to show in your Ajax Search results.

1

Posts Source

Choose any of the below options for your post source.

  • Current Query Post
  • Custom Posts
  • Related Posts
  • Manual Selection
2

Post Types

Choose the type of post you want to display.

3

Include By

Include the posts from different options given below

  • Include Sticky Posts
  • Get Only Sticky Posts
  • Author
  • Date
  • Post Parent
  • Post Meta
  • Most Viewed
  • ID's from PHP function
  • ID's from Post Meta
  • ID's from Dynamic Field
4

Include By Terms

Choose specific posts that you would like to include from your selection by adding rules.

  • Include By Terms Relation
  • Include Terms Children
5

Exclude By

Choose specific posts that you would like to exclude from your selection by adding rules.

  • Terms
  • Current Posts
  • Author
  • Post Without Featured Image
  • Posts with current category
  • Posts with current tags
  • Offset
  • Avoid Duplicates
  • ID's from Dynamic Field

To know more about post query setting, please visit our article on Advanced Post Selection

Post Pagination

1

Pagination

Display the pagination for your ajax search results

  • None
  • Numbers
  • Using Pagination Widget

Show Suggested Searches

1

Suggestions

Display the suggestions for your ajax search results

 

Ajax Search Widget Styling

A variety of styling options are provided to control every aspect of the widget’s appearance. Select the colors that match the theme of your site. Make the widget look exactly how you want it to, by customizing the text, buttons, fonts, and layout.

Search Input Styling

Style the search border, radius, background, text color, padding, and typography.

Search Button Styling

In this section, style the button gap, typography, padding, radius, background, text color, and icon color.

Wrapper Styling

Set the wrapper width, padding, border, radius, alignment, and background.

Results Styling

Set the results shadow, border, radius, background, and items padding.

Results Item Styling

Style the results item border width, color, item padding, background, typography, color, and layout.

Result Item Image Styling

Set the result image width, height, radius, image fit and border.

Label Styling

Set the label color, typography, alignment, and margin.

Loader Styling

Style the loader color.

Results Pagination Styling

Style the results pagination padding, background, color, and typography.

Suggestion Styling

Style for suggestions padding,  color, and typography.

Usage Examples

Here are some live use cases for the Ajax Search Widget.

Video Overview

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!