ajax busca en vivo el título de la publicación

2

Estoy creando una búsqueda en vivo de AJAX para filtrar el título de las publicaciones en mi tema de wordpress. Cuando escribo algo en la entrada, se muestra todo el mensaje en el resultado. No se filtra para obtener una publicación personalizada.

¿Cómo buscar en vivo y encontrar una publicación con 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>
    
pregunta FRQ6692 22.09.2016 - 00:18

2 respuestas

9

Aquí hay una solución de trabajo (probada como está)

El HTML (podría formar parte del contenido de la página)

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

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

El JavaScript (va a las funciones de su tema.php)

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

Y finalmente, la llamada AJAX va a las funciones de tu 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();
}
    
respondido por el Ahmed Fouad 22.09.2016 - 00:46
-1

He estado usando este complemento:

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

es el mejor plugin

y puedes hacer esto en 5 segundos usando esto.

He usado este complemento en mis muchos proyectos.

    
respondido por el Kings 22.09.2016 - 01:17

Lea otras preguntas en las etiquetas