The Inline AJAX Search Bar widget allows you to search content within a specific container.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- Make sure you’ve downloaded the Inline AJAX Search Bar widget.
How to Activate the Click To Media Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
How to Use the Inline AJAX Search Bar Widget in Elementor?
This widget works in connection with other widgets within its container.
Add Container ID
Add the Container widget and then add a CSS ID to it, for instance, we’ve added “search-con”.
Get Other Widget Class Name
We want to search items from the Elementor Icon List widget.
So let’s add the widget in that container and add the items as per your requirements.
Note: You can search content from any widget.
Now we need to find a common CSS class name, for that, you can use the browser inspect element.
For instance, it has a common class “elementor-icon-list-item”.
Add The Inline AJAX Search Bar Widget
Then add the Inline AJAX Search Bar widget in that same container.
Note: To make the Inline AJAX Search Bar widget work, you have to add the widget in the same container for which you’ve created the connection.
Connection
In the Connection ID field, you have to add the container CSS ID, where the widget is added, in our case it will be “search-con”.
Then in the Target ClassName field, you have to add the common CSS class name of the widget you want to search content from. In our case, it is “elementor-icon-list-item”.
Note: You can add multiple CSS classes separated by space to search content from multiple widgets.
Input
In the Placeholder Text field, you can add a placeholder text to the search field.
From the Focus Animation dropdown, you can add different mouse focus animations on the search field. Here you’ll find three options –
- None – To add no animation.
- Border – To add a border animation on focus.
- Background – To add a background animation on focus.
You can add an icon to the search bar by enabling the Prefix Icon toggle.
Extra Options
From the Results dropdown, you can select when to show the search result. Here you’ll find two options –
- On Input Change – To show the search result as you type.
- On Button Click – To show the search result, on a button click.
When the On Button Click option is selected, you can change the button text, button icon and icon position.
From the Style tab, you can further customize the style of the search bar.
Now, when you search for anything in the search bar, it will highlight the matching texts by blurring the unmatched texts.
