Come creare una ricerca ajax instantanea senza plugin

Dato che WordPress ci ha abituato al classico modulo di ricerca che purtroppo non ci piace, oggi vi mostrerò come potete aggiungere un modulo di ricerca ajax al vostro sito web in pochi passi.

Cosa ci serve per aggiungere la ricerca istantanea ajax

Installando un modulo di ricerca istantanea per funzionare correttamente abbiamo prima bisogno di Jquery e utilizzare il file admin-ajax.php per la nostra ricerca, una volta che ci siamo assicurati di aver incluso jquery sul nostro sito possiamo passare al passo successivo.

function ricerca_ajax(input1, input2) {

    input1.keyup(function(e) {
     
        // prevent browser autocomplete
        jQuery(this).attr('autocomplete','off');
         
        // get search term
        var searchTerm = jQuery(this).val();

        var urlFull  = window.location.href;     // URL completa
        var ruta     = window.location.pathname; // URL sin "http://dominio.com"
        var dominio = urlFull.replace(ruta,''); // URL solo "http://dominio.com"

        if(searchTerm.length > 2) { 
            jQuery.ajax({
            url: dominio + "/wp-admin/admin-ajax.php",
            type:"POST",
            data:{
             
            'action':'ajax_search',
            'term' :searchTerm
            },
            success:function(result){    
                input2.fadeIn(200).html(result);
            }
            });
        } else {
            input2.fadeOut(200);
        }

        if(searchTerm.length == 0){
            input2.hide();
        }

        if(e.keyCode == 27){
            jQuery(this).val('');
            input2.hide();
        }

        jQuery('body').click(function(e){
            if ( !jQuery(e.target).hasClass("ricerca-ajax-instant") ) {
                input2.fadeOut(200);
                jQuery(this).val('');
            } 
        });
    });

    input1.keypress(function(e) {
        if(e.keyCode == 27){
            jQuery(this).val('');
            input2.fadeOut(200);
        }
    });
}


var ricerHead1 = jQuery('input#s');
var ricerHead2 = jQuery('ul#webtorino-ajax-search');
ricerca_ajax( ricerHead1, ricerHead2 ); 

Dobbiamo creare una funzione nel file functions.php che ci aiuta ad aggiungere il modulo di ricerca ajax al nostro tema.

<?php 

/**
 * Funzionalità di ricerca ajax
 */
 
add_action('wp_ajax_nopriv_ajax_search','ajax_search');
add_action('wp_ajax_ajax_search','ajax_search');
 
function ajax_search(){
  global $post;

  $args = array(
      'post_type' => 'post',
      'post_status' => 'publish',
      's' =>$_POST['term'],
      'posts_per_page' =>10
  );    
   
  $query = new WP_Query( $args );
   
  // display results
  if( $query->have_posts() ) : ?>

  <?php while( $query->have_posts() ) : $query->the_post(); ?>
   
    <li>
      <?php 
      $terms = get_the_terms( $post->ID, 'category' );
      
      foreach ($terms as $term) {
          break;
      } ?>

      <a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a>
      <div class="clear"></div>
    </li>

    <?php endwhile;
    wp_reset_postdata(); ?>

  <?php else: ?>

    <li class="no-results-ajax">No results.</li>
  <?php endif; ?>
  <?php exit;
}

?>

Ora arriva l’ultimo passo che è quello di visualizzare nella pagina desiderata l’elemento di ricerca e i risultati


<form role="search" method="get" id="web-torino-blog" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input class="ricerca-ajax-instant" type="text" value="" name="s" id="s" placeholder="scrivi qualcosa..."/>
    <ul id="webtorino-ajax-search"></ul> <!-- AJAX search -->
    <input type="submit" id="searchsubmit" value="" />
    <input type="hidden" name="search-type" value="post" />
  </form>
Published
Categorized as Other

Leave a comment

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