When creating a custom header in Elementor, you can add the Search Form widget to provide a search form to make it easy for your visitors to find the content you need on your website. The Search Form widget uses the default search function of WordPress in which the results will be displayed in a separate page, the search results page. To offer your visitors a better experience, you might want to display the results instantly right upon the keyword typing. JetSearch allows you to accomplish it.
The theme builder feature of Elementor Pro actually allows you to create a custom search results page in which you can set the layout of the search results page yourself, as well as adding the elements to your liking. But again. You might want to offer a better experience by adding a live search on your WordPress site.
JetSearch: A Brief Intro
Being an open source software, Elementor has an open ecosystem, allowing third-party developers to join the ecosystem by developing add-ons. Crocoblock is a notable add-on developer in the Elementor ecosystem. It has been developing a number of premium Elementor add-ons. JetSearch is one of which.
JetSearch is an Elementor add-on designed specifically to add an AJAX-based live search. The add-on comes with a widget called Ajax Search which you can add to your custom header (or any area to your liking). When your visitors perform a search via the search form powered by the widget, they will find the search results are instantly displayed on the AJAX-powered popup, instead of being redirected to the search results page. Take a look at the screencast below.
More interestingly, JetSearch allows you to filter the displayed search results. For instance, you can exclude pages to set JetSearch to display blog posts or WooCommerce products only. Or if you have custom post type or custom fields on your WordPress site, you can also use them as the search parameter.
JetSearch is a paid add-on, part of JetPlugins. You can get it whether as a separate add-on or in a set.
How to Use JetSearch
JetSearch comes with an Elementor widget called Ajax Search. You can add the widget to any Elementor page or theme builder template. However, it is ideally added to the custom header template. If you want to add the Ajax Search widget to the custom header template, then you need to use Elementor Pro. Alternatively, you can use JetThemeCore (another add-on from Crocoblock) which also allows you to create custom header. In this article, we will show you to use JetSearch on Elementor Pro.
If you are new to Elementor and have no idea how to create a custom header using Elementor yet, you can read our previous article to learn how. In this article, we will go straight to adding the Ajax Search widget. Simply add the Ajax Search widget to the section of your custom header.
Once the widget is added, go to the Advanced tab on the settings panel and open the Positioning block. Set the Width to Inline (auto). This will make the Ajax Widget horizontally aligned with other widgets within the column.
Switch back to the Content tab on the settings panel and open the Search Form block to set the input icon, place holder, and submit button.
Next, open the Search Query block to make the filtering. You can click the Source field to select particular search areas. For instance, if you want JetSearch to search blog posts only, you can select Posts. To set JetSearch to search WooCommerce products, you can select Products. You can add multiple search areas.
For advanced filtering, you can also include/exclude content by certain terms (category, tag, or author). You can also set the number of posts per page as well as the number of results displayed on a single search query.
Next, you can open the Results Area block to customize the search results area. If you want to use a custom width for the search results area, you can set the Results Area Width option to Custom then set the width accordingly. From the same block, you can also set the results navigation, enable/disable certain components (product price, product rating, post thumbnail, and so on).
If you set custom fields on the search query, you can open the Custom Fields block to set the custom fields before and after the content.
To customize the error messages, you can open the Notifications block. There are two fields you can fill in here as you can see on the screenshot below.
Styling up the search
Once done making the basic settings on the Content tab, you can switch to the Style tab to style up the search. From this tab, you can customize the appearance of the search components. From the search form, submit button, typography settings, and so on. There are 10 blocks you can open here:
- Search form
You can open this block to set the background of the search form, box shadow, border, and padding.
- Input Field
You can open this block to set the typography (font family, font size, font style, and so on) of the input text. From this block, you can also set the text color of the input text, the background of the input field, box shadow of the input field, and so on.
- Submit Button
You can open this block to customize the submit button. Some settings you can apply from this block typography of the submit button text, submit button icon size and color, submit button background color, and so on.
- Results Area
You can open this block to customize the results area like the gap between the search form and the results area, background, border, box shadow, and so on.
- Results Items
You can open this block to customize the items on the results area. Some settings you can apply are typography of the title and content (excerpt), text color of the title and content, background color of each item, and so on.
- Results Counter
On the results area, right before the results items, you will see a note that displays the items found. The note says “n results”. You can open the Results Counter block to customize this part. You can set the typography, background color, text color.
- All Results Button
All Results Button appears at the bottom side on the results area. Clicking this button will take you to the search results page of your WordPress site. You can also customize this part by opening the All Results Button block.
- Navigation Arrows
If you enable the navigation, you can open this block to customize it. You can set the background color, font size, text color, border color, and so on.
- Notifications
You can open this block to customize the error messages. Some settings you can apply here the typography, text color, alignment, and padding.
- Spinner
You can open this block to set the color of the loading bar.
The Bottom Line
Search is a crucial enough feature of a website. Elementor has a default widget that you can use to add a search form to a custom header or any part of your website. To enrich your visitors’ experience, adding an AJAX search can be a great idea. By far (until version 3.2), Elementor has no default widget to add an AJAX search. JetSearch offers a solution to fix the missing piece.
With JetSearch, you have an Ajax Search widget that you can use to add an AJAX-based live search to your website. The ability to apply filtering on the search results area is what makes JetSearch worth to try. The query processing is also fast. JetSearch is the add-on you need if you want to add an AJAX search on your Elementor-powered WordPress site.
