Implement Ajax in WordPress default search
1
up 2 down 0
starvotestarvotestarvotestarvotestarvote
Thank you for voting !

Implement Ajax in WordPress default search

Millions of developers are familiar with WordPress. WordPress is not just a content management system but has become global platform for website development and blogging. By default WordPress lack some important functionalities and features and thus sometime we need to modify its default behavior.

Today we I’ll guide you about Ajax Implementation to WordPress default search functionality. The WordPress search functionality use Keywords we hit and looks up the database for Post/Custom Posts.
The default inbuilt WordPress search function is called using the below code

<?php get_search_form( bool $echo = true ) ?>


The get_search_form() attempt to locate & load the searchform.php file in either the child or the parent theme. If it doesn’t exist, then the default search form will be displayed.The Default WordPress search function perform great but it reload the page on every search hit.

What do you think for Ajax implementation to WordPress search functionality ?

If we convert the WordPress search form into Ajax search form which shows instant results without page reload. In short we are going Ajaxify the default WordPress search form.
We are aware that Ajax is something which send & bring response response from server to browser without refreshing the page.

I’m Providing you complete ajax script for WordPress which fetch instant search results without refreshing the page. Below is the explanation for ajax search script.

First we are going to look the HTML part which consist of input type text field and one div to load the results.

HTML PART


<input type="text" name="pagelist" placeholder="Instant Ajax Search..." class="ajax-search-text form-control">
<p class="loader-text">Loading results...</p>
<div class="instant-ajax-result"></div>


HTML Part (Registered as WordPress shortcode)

we can register WordPress shortcode if we need to display search form on multiple templates and pages. Having shortcode is more better and clean procedure.

<?php
/* register shortcode for form display */
function wp_ajax_function() {
  $formsearch =  '<input type="text" name="pagelist" placeholder="Instant Ajax Search" class="ajax-search-text form-control">';
  $formsearch .= '<p class="loader-text">loading results</p>';
  $formsearch .= '<div class="instant-ajax-result"></div>';
 return $formsearch;
}
add_shortcode( 'ajax_form_wp', 'wp_ajax_function' );
?>


Once we implement the search form HTML code, we need JQuery Ajax to send request to server and receive server response to browser. For JQuery trigger use keyup() event. When we press any character in search form text field two events are fired. The keyup() fires when we release press and release key on keyboard. so we need to use keyup(). Anyway there are 2 main important key event of JS.
  • Keydown event
  • Keyup event


Below is the Ajax Jquery script which triggers on keyup() and send an ajax request to wp-admin/admin-ajax.php. The Ajax Jquery script trigger another function defines in "action parameter" (we will register that function later in WordPress functions.php).

<script>
jQuery(document).ready(function($){
 //when keyup on textbox
 $(".ajax-search-text").keyup(function(){

  var keyValue = $(this).val();
   if(keyValue)    
    $.ajax({
            type : "POST",
            url  : "https://infoconic.com/wp-admin/admin-ajax.php",
            data : 'action=get_search_list_via_ajax&text='+ keyValue ,
            beforeSend: function(){
                jQuery('.loader-text').css('display','inline-block');
            },
            success: function(response) {
                $('.loader-text').css('display','none');
               //past ajax result on result div.
               $(".instant-ajax-result").html(response);
            }
        });   
   }else{
    // if textfield is blank then remove all the ajax list.
    $(".instant-ajax-result").html("");
   }
});
//one more condition when textbox is blank then don't show the listing.
$(".ajax-search-text").blur(function(){
	var keyValue = $(this).val();
   if(!keyValue){
   	$(".instant-ajax-result").html("");
   	$('.loader-text').css('display','none');
   }
});
});
<script>


Now its time to register the function get_search_list_via_ajax() in WordPress functions.php. The below function holds HTML elements like li which store title(with href link) of search results. we can extend the function to get the thumbnails or other data as well.

<?php
/* function for ajax instant search */
function get_search_list_via_ajax(){
 $value  = $_POST['text'];
 $output = "
    "; $argsAjax = array( 's' => $value, 'posts_per_page'=>-1 ); $queryAjax = new WP_Query($argsAjax); if($queryAjax->have_posts()): while ($queryAjax->have_posts()) : $queryAjax->the_post(); $output .= "
  • "; $output .= "".get_the_title().""; $output .= "

    ".get_the_excerpt()."

    "; $output .= "
  • "; endwhile; endif; wp_reset_query(); $output .= "
"; echo $output; die(0); } add_action("wp_ajax_get_search_list_via_ajax","get_search_list_via_ajax"); add_action("wp_ajax_nopriv_get_search_list_via_ajax","get_search_list_via_ajax"); ?>

1 thought on “Implement Ajax in WordPress default search”

  • good


    Comment by kiru on

Leave a Reply to kiru Cancel reply

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

*