Learn how to configure the AJAX Search element from the JetSearch plugin for Bricks and embed it in the site header.
Before you start, check the tutorial requirements:
- Bricks theme installed and activated
- JetSearch plugin installed and activated
The AJAX Search element can be added to any Bricks template, but in this case, we add it to a header. For more information on applying JetPlugins to the Bricks theme, please see the article “What’s Inside Updated JetPlugins and Bricks Builder Integration?“
Create a Template
Go to the WordPress Dashboard > Bricks >Templates tab and press the “Add New Template” button. Here, on the Add New Template page, select the needed option (here, we choose the “Header” option) in the Template type drop-down list.
After that, insert the template’s title and press the “EDIT WITH BRICKS” button.
Insert the AJAX Search Element
Design the template as needed. Next, place the AJAX Search element in the search bar and drag-and-drop it to the desired location.
After that, the element will be added with the unrolled settings.
Configure the Settings
First, we press the “CONTENT” tab and unroll the SEARCH FORM settings. Here, we enable the Show Categories List toggle and set the needed Taxonomy in the drop-down list.
More details on configuring these settings can be found in the AJAX Search Form Overview.
Also, to change and style a text, read the How to Customize the Placeholder Text Shown in the Search Field tutorial.
Next, we move to the SEARCH AREA tab and set the required Listing for displaying the search results.
More details on displaying different types of content are presented in the How to Customize the Content Shown in the Search Results tutorial.
Finally, move to the top right corner and press the “Save” icon.
Test the Flow
Assign the header to a page and move to the front end. Here, type three characters in the corresponding field of the AJAX Search element to find the needed items.
In addition, since we enabled the Show Categories List toggle in the AJAX Search element settings, we can set the needed category and select the required item that corresponds to this category.
That’s it. Now you know how to add the AJAX Search element to the website’s header with the help of the JetSearch plugin for WordPress.
