As web designers, we must surely improve user experience. Adding search feature is one of the ways to contribute to the user experience. When the users land on your site and want to find specific information or content, they usually go to the search field and type the keyword. The users may leave your site if you can’t present a compelling search form. This means you will lose potential business possibilities or visibility.
Adding live search is one way to make your site’s search form look compelling. This article will show you how to add the live search in Elementor using JetSearch.
Steps to Add Live Search in Elementor using JetSearch
Step 1: Install and Activate JetSearch
Until this article is made, Elementor doesn’t have a feature to add the live search by default. So, you’ll need the help of a third-party Elementor add-on. This tutorial uses the Ajax Search widget by the JetSearch add-on.
You can purchase JetSearch for a single plugin or buy a bundle of Crocoblock plugins—download JetSearch on its official website. Please install and activate it once you have downloaded it.
Step 2: Add the Ajax Search Widget
Go to your Elementor editor; you can create new content or select existing content. In this example, we will edit our header template. Which means we will add a live search into a header.
Once you enter the Elementor editor, select the Ajax Search widget from the widget panel and then drag and drop it into the canvas area.
Step 3: Edit and Style up the Ajax Search Widget
Once you add the Ajax Search widget to the canvas area, you can edit and style up the Ajax Search widget with your preference.
In this example, we will apply a few changes as below:
- Enable the Show Categories List option
- Set the Taxonomy to Categories
The Bottom Line
The live search brings your search form to the next level. It allows users to see the search results without redirecting to the results page. Elementor and JetSearch will is the perfect combination for creating a live search; seamless and effortless.
JetSearch has four key features as below:
