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

12 Comments

  • DenDionigi says:

    Amazing tutorial.
    Can you also make a plain vanilla js (with “xmlHttpRequest();”) ?

    Thank you

  • Андрей says:

    Идеальный пример! Спасибо)))

  • Luis Kabes says:

    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

    • mukto says:

      Try this hope it work.

      function search_by_sku( $search, &$query_vars ) {
          global $wpdb;
          if(isset($query_vars->query['s']) && !empty($query_vars->query['s'])){
              $args = array(
                  'posts_per_page'  => -1,
                  'post_type'       => 'product',
                  'meta_query' => array(
                      array(
                          'key' => '_sku',
                          'value' => $query_vars->query['s'],
                          'compare' => 'LIKE'
                      )
                  )
              );
              $posts = get_posts($args);
              if(empty($posts)) return $search;
              $get_post_ids = array();
              foreach($posts as $post){
                  $get_post_ids[] = $post->ID;
              }
              if(sizeof( $get_post_ids ) > 0 ) {
                      $search = str_replace( 'AND (((', "AND ((({$wpdb->posts}.ID IN (" . implode( ',', $get_post_ids ) . ")) OR (", $search);
              }
          }
          return $search;
          
      }
          add_filter( 'posts_search', 'search_by_sku', 999, 2 );
      
  • Marioo says:

    Hi,
    thank you

    Is it possibile to search only in the title and not on post_content?

    Thank you

    • mukto says:

      Try this hope it’s work –

      
      function __search_by_title_only( $search, &$wp_query )
      {
          global $wpdb;
          if(empty($search)) {
              return $search; // skip processing - no search term in query
          }
          $q = $wp_query->query_vars;
          $n = !empty($q['exact']) ? '' : '%';
          $search =
          $searchand = '';
          foreach ((array)$q['search_terms'] as $term) {
              $term = esc_sql($wpdb->esc_like($term));
              $search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
              $searchand = ' AND ';
          }
          if (!empty($search)) {
              $search = " AND ({$search}) ";
              if (!is_user_logged_in())
                  $search .= " AND ($wpdb->posts.post_password = '') ";
          }
          return $search;
      }
      add_filter('posts_search', '__search_by_title_only', 500, 2);
      
      
  • Sayan says:

    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.

    • mukto says:

      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. 🤗

  • vasilis says:

    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!

Leave a Reply

Your email address will not be published.

five × five =

WordPress category or taxonomy list

WordPress custom taxonomy term list with function ...

Add Custom element item in wp nav menu

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

WP Post Query with variable item column size

...

Most View or Popular Post on WordPress

WordPress Post query by user views without plugin ...

Remove Website field from WordPress comment & Change cookies remember text

Remove Website field from WordPress comment & Chan ...

ACF

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

skype

Need Coding Help?

Connect Skype
top