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.