Overview of the Ajax Search module

This page shows you how to add the Ajax Search module to your page and explains every setting in its Content, Design and Advanced tabs. The Ajax Search module adds a live search bar that shows matching posts, pages or products right under the bar as visitors type. For more details, view the demo.

How to add the Ajax Search module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Ajax Search in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Configuration

• Search Field Placeholder: Input the placeholder to be used for the search field.
• Search Result Number: Input the number of items to be displayed in the search result. Input -1 for all.
• Order By: Choose the order type of your results.
• Order: Choose the order of your results.
• No Result Text: Input the custom text to be displayed when no results found.

Search Area

• Search In: Choose where you would like to search in.
• Post Types: Choose which post types you would like to search in.
• Exclude Protected Posts: Enable to exclude password protected posts.

Display

• Show Search Icon: This will turn the search icon on and off.
• Display Fields: Choose which fields you would like to display in search results.
• Number Of Columns: Select the number of columns to display result items.

Scrollbar

• Scrollbar: Select whether to show or hide scrollbar. This is totally depends on the browser, we can not guarantee the result of it.

Link

• Result Item Link Target: Choose whether or not the search result item opens the link in a new window.

Background

• Search Result Item Background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Search Result Item Background Color
• Background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Background Color

Design tab settings

The Design tab lets you style each part of the module:

• Search Field: styling options for the search field.
• Search Icon: styling options for the search icon.
• Loader: styling options for the loader.
• Search Result Item Text: styling options for the search result item text.
• Featured Image: styling options for the featured image.
• Result Box: styling options for the result box.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.