Create An Advanced Search Bar In Elementor Using JetSearch

In this tutorial, I show you how you can create an advanced search bar with realtime results in your Wordpress and Elementor Website. The plugin is called JetSearch from Crocoblock and it can be used in your Wordpress website using (the free and Pro version of) Elementor.

In this tutorial, I show you how you can get JetSearch from Crocoblock, install it into your Wordpress and Elementor website, drag it into the page builder, configure the settings and the style. Below you can see an overview with timestamps:

Timestamps JetSearch
00:00 Intro
00:11 What You Will Learn
03:16 Get JetSearch From Crocoblock
05:50 Download and Install JetSearch
06:13 Get Your API Key
06:36 Import JetSearch Into Elementor

The Content Settings
07:06 Style The Section Around JetSearch
10:11 Add A Category List
13:24 Search By The Current Query
14:11 Add Custom Fields To The Search Query
20:20 The Results Area
24:01 Add Extra Information In The Search Results
27:10 Configure The Notification Text

Styling Of The JetSearch Element
28:04 The Search Form
29:12 The Input Fields And Category List
29:47 The Input Field
31:39 The Submit Button
32:23 Categories List
33:38 The Categories Drop Down Menu
35:13 The Results Area
37:06 The Results Items
40:39 The Custom Fields
43:07 The Results Counter
43:32 All Results Button
44:33 Bullets & Pagination
47:23 Thank You

This can be used in your Wordpress website for blog posts, pages, WooCommerce products, custom post types. For any type of content.

[adenugbavictor]

Thank you ferdy, you are the best teacher I ever met on YouTube teaching website design

[eleniminadaki]

Hi Ferdy and a happy new year, I am watching your tutorials for about 3 years and I want to thank you for the help you gave me. I ll buy crocoblock using your link, to support your channel.

[shakilcse]

Its really good and YOU are croco block fan and I am your big fan 😊

[rhinoteam]

Hi Ferdy, Thank You so much for your training videos. You are superb. I greatly appreciate your efforts to help people like myself. Thank You and God Bless You and your family and abundantly prosper you.

[shafienayat]

Lots of love Ferdy ♥️♥️♥️
Appreciate your last few words ✅

[elsdq]

First here. Thanks great teacher of Wordpress.

[ingarnt]

Hoping for an updated Crocoblock Tutorial soon :D

[zaighambajwa]

Hi Ferdy! Big Fan of Yours. Learned alot from you. Please make a video on Travel Site Booking Portal, Hotels/Trips etc using Divi or any free plugin/theme

[JahinShahriar]

Hi ferdy a travel site with booking, hotel info with jet engine please... Hoping too see it soon ❤️

[Moonlight-ejqo]

Ferdy you are my favourite one I like your tutorials. Do you have any website design full course?

[PFRstudio]

Hello, thank you for this very helpful tutorial! I have a question: how can I make the Listing Grid stay hidden by default until something is typed into the Search Filter? I would like the results to appear only when the user starts typing in the search bar.

Thank you so much for your help!

[rozuja]

Really good Video!! When your using before and after contect with custom fileds and I have an array how to display the array with the "%s"

[AashishKaji]

Can't we add multiple taxonomies option/box, there is only one. What if we need more. Like color and categories all

[TVDramaHome]

Thank you for your amazing video. Could you show us how to optimize this plugin in mobile mode? I want only the search icon, not the search bar.

[Алексей-йзш]

Excellent tutorial!

Looking for a way to implement an exact search in JetSearch: if user is searching for "book" - he will only get "book" and not "booking".
Could you please kindly suggest the way to make it?

[MrZejjari]

Hi, thanks for all the tutorials ; Can you show us how to customize search widget input on MOBILE, to become bigger automatically once you type text on it

[matteovelicogna]

Hi, can I add another field to ajax search?
Example: text input field, gender field, product category field.
So I'm gonna have two "filters" and not just one as you showed in the video.
Thanks

[adventures]

Hi Thanks for the video!

Do you also have video on how to customize / design jetsearch search results page using elementor and save it as a template so it replaces the existing default website template search archive?

[engrwehelie]

Hir @Ferdy, would you give the link to this complete video

[cihanunlu]

Is it possible to import bulk database of products and search among them(from xlsx or css)?