Categories
Blog

How to Add Auto Live Search Capability on Divi’s Search Module for Free

Divi’s Search module is nice for the fact that we can create several styles on it. But it misses one functionality that makes people look for a another similar plugin…

[et_pb_section bb_built=”1″ _builder_version=”3.23.3″ background_color=”#fbfcfd” z_index_tablet=”500″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” next_background_color=”#ffffff”][et_pb_row disabled_on=”on|on|” _builder_version=”3.23.3″ min_height=”20px” z_index_tablet=”500″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”][et_pb_column type=”1_2″][et_pb_image src=”https://websiteforjust200.com/wp-content/uploads/2018/09/financeboard.jpg” _builder_version=”3.23.3″ custom_margin=”-5%|||25%” custom_margin_last_edited=”on|” z_index_tablet=”500″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” custom_css_main_element=”-webkit-clip-path: circle(50% at 50% 50%);||clip-path: circle(50% at 50% 50%);||width: 75px;||height: 75px;” /][/et_pb_column][et_pb_column type=”1_2″][et_pb_text _builder_version=”3.23.3″ text_font=”Source Sans Pro||||||||” text_text_align=”left” text_text_color=”rgba(0,0,0,0.8)” text_font_size=”18px” header_font=”||||||||” header_text_align=”left” custom_margin=”-3%|||-65%”]

ErnestPH

[/et_pb_text][et_pb_text _builder_version=”3.23.3″ text_font=”Source Sans Pro||||||||” text_text_align=”left” text_text_color=” rgba(0,0,0,0.44)” header_font=”||||||||” header_text_align=”left” custom_margin=”-5%|||-65%”]

Web developer

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”4_4″][et_pb_post_title _builder_version=”3.23.3″ text_orientation=”center” text_shadow_horizontal_length=”text_shadow_style,%91object Object%93″ text_shadow_horizontal_length_tablet=”0px” text_shadow_vertical_length=”text_shadow_style,%91object Object%93″ text_shadow_vertical_length_tablet=”0px” text_shadow_blur_strength=”text_shadow_style,%91object Object%93″ text_shadow_blur_strength_tablet=”1px” title_text_shadow_horizontal_length=”title_text_shadow_style,%91object Object%93″ title_text_shadow_horizontal_length_tablet=”0px” title_text_shadow_vertical_length=”title_text_shadow_style,%91object Object%93″ title_text_shadow_vertical_length_tablet=”0px” title_text_shadow_blur_strength=”title_text_shadow_style,%91object Object%93″ title_text_shadow_blur_strength_tablet=”1px” meta_text_shadow_horizontal_length=”meta_text_shadow_style,%91object Object%93″ meta_text_shadow_horizontal_length_tablet=”0px” meta_text_shadow_vertical_length=”meta_text_shadow_style,%91object Object%93″ meta_text_shadow_vertical_length_tablet=”0px” meta_text_shadow_blur_strength=”meta_text_shadow_style,%91object Object%93″ meta_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″ title_font=”Source Sans Pro|600||on|||||” title_font_size=”47px” meta=”off” author=”off” date=”off” title_font_size_tablet=”35px” title_font_size_phone=”30px” title_font_size_last_edited=”on|phone” featured_image=”off” /][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”on” specialty=”off” prev_background_color=”#fbfcfd” next_background_color=”#000000″ inner_width=”auto” inner_max_width=”none”][et_pb_fullwidth_image _builder_version=”3.23.3″ src=”https://websiteforjust200.com/wp-content/uploads/2018/10/Screen-Shot-2018-10-08-at-1.38.35-PM-e1558953767962.png” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″ /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Why choose us” _builder_version=”3.8″ custom_padding=”0|0px|0|0px|false|false” prev_background_color=”#000000″ inner_width=”auto” inner_max_width=”none”][et_pb_row custom_padding=”0|0px|0|0px|false|false” _builder_version=”3.0.48″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”80%” max_width=”1080px”][et_pb_column type=”4_4″][et_pb_code _builder_version=”3.23.3″ z_index_tablet=”500″]Home » Blog » How to Add Auto Live Search Capability on Divi’s Search Module for Free[/et_pb_code][et_pb_text _builder_version=”3.15″ text_font=”Share Tech||||||||” text_text_color=”rgba(0,0,0,0.02)” text_font_size=”100px” text_font_size_tablet=”80px” text_font_size_phone=”60px” text_font_size_last_edited=”on|desktop” text_line_height=”0.2em” header_2_font=”Share Tech||||||||” header_2_font_size=”48px” header_2_font_size_phone=”36px” header_2_font_size_last_edited=”on|phone” header_2_line_height=”1.4em” custom_margin=”||30px||false” custom_margin_tablet=”||0px|” custom_margin_last_edited=”on|tablet”]

Several plugins promises to give better search results but either it’s a paid plugin or integrating it with Divi’s search module proves to be difficult.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”0|0px|0|0px|false|false” padding_top_2=”120px” padding_2_tablet=”40px|||” padding_2_last_edited=”on|tablet” _builder_version=”3.8″ width=”80%” max_width=”1080px”][et_pb_column type=”1_2″][et_pb_blurb title=”You only need to install SearchWP Live Ajax Search” url=”https://wordpress.org/plugins/searchwp-live-ajax-search/” url_new_window=”on” use_icon=”on” font_icon=”%%202%%” icon_color=”#ffa727″ icon_placement=”left” content_max_width=”1100px” use_icon_font_size=”on” icon_font_size=”28px” _builder_version=”3.15″ header_font=”Share Tech||||||||” header_font_size=”24px” header_line_height=”1.2em” body_font=”Open Sans||||||||” body_font_size=”16px” body_line_height=”1.8em” custom_padding=”|||” animation_style=”fold” animation_delay=”150ms” animation=”off” locked=”off” /][et_pb_blurb title=”And add this simple code ( data-swplive=%22true%22 )” use_icon=”on” font_icon=”%%202%%” icon_color=”#ffa727″ icon_placement=”left” content_max_width=”1100px” use_icon_font_size=”on” icon_font_size=”28px” _builder_version=”3.15″ header_font=”Share Tech||||||||” header_font_size=”24px” header_line_height=”1.2em” body_font=”Open Sans||||||||” body_font_size=”16px” body_line_height=”1.8em” custom_padding=”|||” animation_style=”fold” animation_delay=”150ms” animation=”off” locked=”off” /][/et_pb_column][et_pb_column type=”1_2″][/et_pb_column][/et_pb_row][et_pb_row custom_padding=”38px|0px|0|0px|false|false” padding_top_2=”120px” padding_2_tablet=”40px|||” padding_2_last_edited=”on|tablet” _builder_version=”3.8″ width=”80%” max_width=”1080px”][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.23.3″ text_font=”Cardo||||||||” text_font_size=”25px” max_width_last_edited=”off|desktop” text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″ text_text_align=”left” text_text_color=”rgba(0,0,0,0.8)” text_font_size_tablet=”19px” text_font_size_phone=”17px” text_font_size_last_edited=”on|phone” text_line_height=”1.8em” max_width=”800px”]

Divi’s Search module is nice for the fact that we can create several styles on it. But it misses one functionality that makes people look for a another similar plugin, the ability to show live results in real time (see 1st image attached). And because of this, users ditch out this module to find a better alternative.

But today, we are going to celebrate the fact that we can now use it with the functionality that we have been looking for. And to point out, the solution I found out is for free. We don’t have to pay a single dime to make Divi’s search module provide live results when searching. Without further ado, here’s how to activate the functionality.

[/et_pb_text][et_pb_code _builder_version=”3.23.3″ z_index_tablet=”500″] style=”display:block; text-align:center;” data-ad-layout=”in-article” data-ad-format=”fluid” data-ad-client=”ca-pub-8321671686661681″ data-ad-slot=”6190086485″>[/et_pb_code][et_pb_image src=”https://websiteforjust200.com/wp-content/uploads/2018/10/Screen-Shot-2018-10-08-at-1.09.16-PM.png” _builder_version=”3.23.3″ align_last_edited=”on|desktop” align_tablet=”center” width_last_edited=”off|” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″ width=”65%” /][et_pb_text _builder_version=”3.23.3″ text_font=”Cardo||||||||” text_text_align=”left” text_text_color=”rgba(0,0,0,0.8)” text_font_size=”25px” text_font_size_tablet=”19px” text_font_size_phone=”18px” text_font_size_last_edited=”on|tablet” text_line_height=”1.8em” text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” max_width=”800px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” z_index_tablet=”500″]

Activate the SearchWP Live Ajax Search

This plugin will give us the code that we will add later inside Divi’s search.php file. Once the the plugin is activated, click the “view details” link and look for the code.

Copy the code and let’s add it on Divi’s template files

data-swplive="true"

The code is located in Divi/includes/builder/module/Search.php. Make sure that you have enough permission to edit the file. Don’t worry as Divi won’t overwrite edited module files.

In line 399, you can see this code…

input type="text" value="" name="s" class="et_pb_s" %7$s=""

Next, append this line and add the code we just copied earlier. It will now look like this,

input type="text" value="" name="s" class="et_pb_s" %7$s="" data-swplive="true"

After that, saved the changes.

Now, if we go back to the search field. Live datas are already showing. (see image below)

So that’s how you add a live search capability for Divi’s Search module.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

2 replies on “How to Add Auto Live Search Capability on Divi’s Search Module for Free”

Leave a Reply

Your email address will not be published. Required fields are marked *