Use ajax in wordpress default Search Function
up 2 down 0
Already voted!

Use ajax in wordpress default Search Function

Millions of developers are familiar with wordpress. WordPress in today’s internet world is not only a content management system but has become a global platform for building a website. WordPress by default comes with lots of functions , but sometimes we need to modify the function up to satisfactory level. Today we will discuss about one of those function which is commonly pronounced as wordpress default search functionality.
The default inbuilt wordpress search function form can be called using the below code

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

The Default wordpress search form filters works well but it refresh the page on every search and search results are not instantly fetched….

what we plan is to convert the wordpress search form into Ajax search form which shows the search result instantly below the form. In short we are going to Ajaxify the default wordpress search form. As we all know that Ajax is something which brings response from server to browser without refreshing the page. It updates the page on our request….

we have here ajax script for wordpress in which we can have instant search results without refreshing the page. we can use this script whenever required by our clients. Below is the explanation for ajax search script. First we are going to see the HTML part which consist of input type text field and a div to load the results.
<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>

Now after placing the above HTML part in the place where actually form is required , we will move forward with jquery placement. The jquery will trigger on keyup() event. When the user enter something in the search form two events happens always

. The keyup() is sent to an element when the user releases a key on the keyboard. so we are going to use keyup().
1) Keydown event
2) Keyup event

so below is the jquery part which will trigger on keyup() and send an ajax request to wp-admin/admin-ajax.php by using a function(we will register later that function in wordpress functions.php) in action parameter.
Adjustment may be required that weather to place the jquery part in footer/header.
//when keyup on textbox

var keyValue = $(this).val();
type : "POST",
url : "",
data : 'action=get_search_list_via_ajax&text='+ keyValue ,
beforeSend: function(){
success: function(response) {
//past ajax result on result div.
// if textfield is blank then remove all the ajax list.
//one more condition when textbox is blank then don't show the listing.
var keyValue = $(this).val();

Now its time to register the function get_search_list_via_ajax() in wordpress functions.php. The below function will consist of list li which stores the only title(with href link) of search results. we can extend the function to get the thumbnails and other data in search results.
/* function for ajax instant search */
function get_search_list_via_ajax(){
$value = $_POST['text'];
$output = "<ul class='list-unstyled'>";

$argsAjax = array(
's' => $value,
$queryAjax = new WP_Query($argsAjax);
while ($queryAjax->have_posts()) : $queryAjax->the_post();

$output .= "<li>";
$output .= "<a href='".get_permalink()."'>".get_the_title()."</a>";
$output .= "<p>".get_the_excerpt()."</p>";
$output .= "</li>";

$output .= "</ul>";
echo $output;

Something To Say ?

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