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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Ajax Search”
- Hover over the widget in the search results and click install
- Add your “Ajax Search” widget to any Elementor Page
General Settings #
Enable Connection to Ajax Post Filters
This will enable the widget to establish connection to Ajax Post Filter.
Search Button Open New Window
Clicking on search button will open a new window.
Search Result Open New Window
Clicking on any of the search results will open a new window.
Search Placeholder
Type text to display as search placeholder.
Show Search Button
Show/Hide the search button.
Search Button Text
Type text to display in the search button.
Search Button Icon
Choose an icon to display as search button.
Show Search Label
Show/Hide the search label.
Layout
Select the layout of ajax search widget.
- Row
- Row Reverse
Results Settings #
Show Pagination
Show/Hide the pagination element.
Pagination Position
Set the positioning of pagination.
- Before Results
- After Results
Number of Items Per Page
Specify the number of items to show on a page.
Left Font Awesome
Paste unicode from font awesome website for left side.
Right Font Awesome
Paste unicode from font awesome website for right side.
Keys Control
Enable or disable keys control.
Number of Columns
Set the number of columns to display.
Items Gap
Set the gap between items.
No Result Text
Type text to display when no result found.
Testing and Tools #
Show List Debug
Debug list in editor, so you can style it.
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.
Posts Source
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Post Types
Choose the type of post you want to display.
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
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
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 #
Pagination
Display the pagination for your ajax search results
- None
- Numbers
- Using Pagination Widget
Show Suggested Searches #
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.
