it-swarm.com.ru

aJAX живой поиск заголовка сообщения

я создаю AJAX живой поиск, чтобы отфильтровать заголовок сообщения в моей теме WordPress. Когда я пишу что-то во вводе, он показывает все сообщения в результате, а не фильтрует их, чтобы получить пользовательское сообщение.

Как искать вживую и найти сообщение с 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>
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>
2
FRQ6692

Вот рабочее решение (проверено как есть)

HTML (может быть частью содержимого страницы)

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

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

JavaScript (идет в functions.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
}

И, наконец, вызов AJAX переходит к функциям вашей темы.

// 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();
}
9
Ahmed Fouad
/* Filled in admin profile */
add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );
function extra_user_profile_fields( $user ) { ?>
    <h3><?php _e("Extra profile information", "blank"); ?></h3>

    <table class="form-table">
    <tr>
        <th><label for="address"><?php _e("Address"); ?></label></th>
        <td>
            <input type="text" name="postSearch" id="postSearch" value="<?php echo esc_attr( get_the_author_meta( 'postSearch', $user->ID ) ); ?>" class="regular-text" /><br />
            <span class="description"><?php _e("Please enter your address."); ?></span>
            <div id="datafetch"></div>
        </td>
    </tr>
    </table>
<?php }


// the jQuery Ajax call here
add_action( 'admin_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">

    (function($){
        var searchRequest = null;

        jQuery(function () {
            var minlength = 3;

            jQuery("#postSearch").keyup(function () {
                var that = this,
                value = jQuery(this).val();

                if (value.length >= minlength ) {
                    if (searchRequest != null) 
                        searchRequest.abort();
                    searchRequest = jQuery.ajax({
                        type: "POST",
                        url: "<?php echo admin_url('admin-ajax.php'); ?>",
                        data: {

                            action: 'data_fetch',
                            search_keyword : value

                        },
                        dataType: "html",
                        success: function(data){
                            //we need to check if the value is the same
                            if (value==jQuery(that).val()) {
                                jQuery('#datafetch').html(data);
                            }
                        }
                    });
                }
            });
        });
    }(jQuery));
</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['search_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(); 
}
0
Sanjay Parmar