ajax live search para o título da postagem

2

Estou a criar uma pesquisa em direto AJAX para filtrar o título das publicações no meu tema wordpress. Como eu escrevo algo na entrada mostra todo o post no resultado, não filtrando-o para obter post personalizado ..

Como pesquisar ao vivo e encontrar uma postagem com o AJAX?

Function.php

<?php 
add_action('wp_ajax_my_action' , 'data_fetch');
add_action('wp_ajax_nopriv_my_action','data_fetch');

function data_fetch(){
    $the_query = new WP_Query(array('post_per_page'=>5));
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>
            <h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>

        <?php endwhile;
        wp_reset_postdata();  
    endif;
    die();
}?>

Script:

<script>
function fetch(){

    $.post('<?php echo admin_url('admin-ajax.php'); ?>',{'action':'my_action'},
    function(response){
        $('#datafetch').append(response);
        console.log(result);
    });
}
</script>

HTML:

<input type="text" onkeyup="fetch()"></input>
    <div id="datafetch">
</div>
    
por FRQ6692 22.09.2016 / 00:18

2 respostas

9

Aqui está uma solução de trabalho (testada como está)

O HTML (pode fazer parte do conteúdo da página)

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>

<div id="datafetch">Search results will appear here</div>

O JavaScript (vai para o functions.php do seu tema)

// 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
}

E finalmente a chamada AJAX vai para as funções do seu tema.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' => 'post' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>

        <?php endwhile;
        wp_reset_postdata();  
    endif;

    die();
}
    
por Ahmed Fouad 22.09.2016 / 00:46
-1

Eu tenho usado este plugin:

ajax-search-pro-for-wordpress-live-search-plugin

é o melhor plugin

e você pode fazer isso em 5 segundos usando isso.

Eu usei este plugin nos meus muitos projetos.

    
por Kings 22.09.2016 / 01:17