WordPress Ajax Search without plugin [ Easy ]

WordPress Ajax Search without plugin. Fully custom code work with woocommerce as well

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

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

Search page
<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.

functions.php
<?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 ]

only if custom post type not show in search result
/**
 * 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

Custom.js
$("input#keyword").keyup(function() {
      if ($(this).val().length > 2) {
        $("#datafetch").show();
      } else {
        $("#datafetch").hide();
      }
    });
Style.css
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!

Previous Code

Upload file in hosting server via CPanel corn job

File transfer with Cpanel Cron job. Transfer file ...

Next Code

Cookie Popup with jQuery

Browser cookies popup accept, store cookies in bro ...

0 Comment

Leave a Reply

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

6 + 1 =

Conditional statement to show pagination

Conditional statement to show pagination on WordPr ...

Add Custom element item in wp nav menu

Add Element on last item of wp nav menu ...

WordPress Next and Previous Post

WordPress Next and Previous Post navigation for cu ...

WordPress category or taxonomy list

WordPress custom taxonomy term list with function ...

wp-config development code

WordPress post revisions, debug, load-scripts.php ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top