WordPress Default Search is Not cool. we are going to create WordPress Ajax Search without plugin that will look something like this.
![WordPress Ajax Search without plugin [ Easy ] WordPress Ajax Search without plugin](https://code.mukto.info/wp-content/uploads/2021/07/image.png)
First We need to Create an input Field so users can search. Put it anywhere page template, single.php, archive.php, index.php, page.php, or anywhere you want to show search field
<div class="search_bar">
<form action="/" method="get" autocomplete="off">
<input type="text" name="s" placeholder="Search Code..." id="keyword" class="input_search" onkeyup="fetch()">
<button>
Search
</button>
</form>
<div class="search_result" id="datafetch">
<ul>
<li>Please wait..</li>
</ul>
</div>
</div>
Main code for WordPress Ajax Search without plugin
Now put below code to functions.php On the post query you can customize your html as you want. This code will interact with HTML to achieve our goal to create wp Ajax Search without plugin.
<?php
/*
==================
Ajax Search
======================
*/
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch(){
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
success: function(data) {
jQuery('#datafetch').html( data );
}
});
}
</script>
<?php
}
// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','post') ) );
if( $the_query->have_posts() ) :
echo '<ul>';
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
<?php endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
die();
}
Ajax Search for Custom post type
This code will be show result from page & post but if you want you can activate if for your wp custom post type as well. Simply you need to change ‘post_type’ => array(‘page’,’post’) to ‘post_type’ => array(‘your_custom_post_type’)
If search not work use this code [Most of the time not need ]
/**
* This function modifies the main WordPress query to include an array of
* post types instead of the default 'post' post type.
*
* @param object $query The main WordPress query.
*/
function mukto_post_type_include( $query ) {
if ( $query->is_main_query() && $query->is_search() && ! is_admin() ) {
$query->set( 'post_type', array( 'post', 'page', 'custom_post_type' ) );
}
}
add_action( 'pre_get_posts', 'mukto_post_type_include' );
Learn more about WordPress Ajax here
WP ajax search result issue [ Fixed ]
Our wordpress Ajax Search without plugin Now it working 😍 But there is still a issue. Some time it show all post when you not write anything on search. Top fix this let’s write some jQuery so search result only show when you have more then 2 character on search filed
$("input#keyword").keyup(function() {
if ($(this).val().length > 2) {
$("#datafetch").show();
} else {
$("#datafetch").hide();
}
});
div.search_result {
display: none;
}
Put this code on any js file you linked with your theme or child theme. That’s all.
Check out our other WordPress useful code
Thank you!
12 Comments
Amazing tutorial.
Can you also make a plain vanilla js (with “xmlHttpRequest();”) ?
Thank you
Happy to know you like it.
Will add to my todo 😉
Thanks
Идеальный пример! Спасибо)))
Thanks
Hello Mukto, thanks for the tutorial, it’s working. But, how to show the query when user search by SKU products? i’ve try to install relevanssi but it’s still not working.
Thank you
Try this hope it work.
Hi,
thank you
Is it possibile to search only in the title and not on post_content?
Thank you
Try this hope it’s work –
Hello I want to search on basis of taxonomies of post type to show the post listing under related to the taxonomies.
Thanks in advance.
I think you need to work with query check this part of code and try modify.
I have a plan to expand this tutorial base on the use case I got from the comment. so keep looking. 🤗
Amazing tutorial and really fast search results!
I just have a question. Is it necessary to add nonce functionality for security reasons and how can I add it?
Thank you!
Thank you. It’s all up to you. I think it is not super necessary in this case. Read this may be helpful for you https://developer.wordpress.org/themes/theme-security/using-nonces/